如何使用谷歌图表api绘制的仪表板中的表格进行交互?

时间:2012-08-13 20:28:08

标签: google-visualization dashboard getselection

我有一个包含表格和字符串过滤框的仪表板。我想与表进行交互,以便能够选择行并从中检索相应的数据。

稍微改变之后我得到了getSelection()方法但是出现了另一个问题..使用下面的代码我尝试过滤表然后选择并获取行数据..这一切似乎没关系但是当我这样做时过滤的表行号和实际数据中的行号不匹配。这是我最终提到行数据提醒参考预过滤表...再次任何建议是高度重视..谢谢..

       var dashboard, table, data;

  function drawVisualization() {

    var array = new Array(['ticker','time','bid','open','high','low','volume']);
    var ticker, time, bid, open, high, low, volume; 
        $.get('php/getdata.php', {input: 'stocklist'}, function(data1){

        $.each(data1, function(index, value){           
            ticker = value.ticker;
            time = value.time;
            bid = parseFloat(value.bid);
            open = parseFloat(value.open);
            high = parseFloat(value.high);
            low = parseFloat(value.low);
            volume = parseFloat(value.volume);
            array.push([ticker, time, bid, open, high, low, volume]);
        });

    data = google.visualization.arrayToDataTable(array);

    var stringFilter = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'control1',
      'options': {
        'filterColumnLabel': 'ticker'
      }
    });

    table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'chart1',
      'options': {'showRowNumber': false, 'height': '130px', 'width': '1000px'}
    });

    dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'))
    dashboard.bind(stringFilter, table);
    dashboard.draw(data);

    google.visualization.events.addListener(table, 'select', selectHandler);
  }, "json");
  }

  function selectHandler() {
    var selection = table.getChart().getSelection();

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
        } else if (item.row != null) {
        stockID = data.getFormattedValue(item.row, 0);
        } else if (item.column != null) {
        stockID = data.getFormattedValue(0, item.column);
        }
    }
    if (stockID == '') {
    return;
    }       
alert(stockID);
}

  google.setOnLoadCallback(drawVisualization);

1 个答案:

答案 0 :(得分:1)

我有类似的问题。 应用过滤器后,您必须获取新的DataTable。尝试更改

stockID = data.getFormattedValue(item.row, 0);

stockID = table.getDataTable().getFormattedValue(item.row, 0);

和其他情况相同。

欢呼声