javascript - Google Charts 中的动态数据加载

Question

我有一个 google 图表，我用 JSON 数据提供如下:

      var visualization;
      var chart_url = 'http://XXappspot.com/data?v=load1&v=load5&v=load15&span=100';

      function drawVisualization() {
        var query = new google.visualization.Query(chart_url);
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }

        var data = response.getDataTable();
        var formatter = new google.visualization.DateFormat( { pattern: 'd MMM, HH:mm:ss' } );
        formatter.format(data, 0);
        visualization = new google.visualization.LineChart(document.getElementById('visualization'));
        visualization.draw(data, { hAxis: { format: "HH:mm" }});
      }

      google.setOnLoadCallback(drawVisualization);

现在我想在页面上添加按钮，这将更改数据源(请求其他数据)并刷新图表。我在文档中看到了控件的使用，但它们似乎只适用于已下载的数据，而我想重新下载不同的数据。任何想法如何做到这一点？

奖金问题:有没有办法改变 X 轴的时区？不，将“timeZone”添加到 hAxis 选项不起作用。最好，我想以用户的本地时区显示日期时间数据。

Answer 1

向页面上的按钮添加一个事件监听器，更改 chart_url 并调用 drawVisualization。

function changeUrl () {
    chart_url = 'http://new.url.com';
    drawVisualization();
}

就更改数据的时区而言，默认情况下会在本地时区创建和显示 Date 对象。如果您的数据代表另一个时区，则必须将其输入为 UTC 时间，或使用函数将日期转换为 UTC 时间:

function drawCharts () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Date and time');
    data.addColumn('number', 'Value');

    // add 100 rows of pseudo-random-walk data
    var val = 50, hour, minute;
    for (var i = 0; i < 100; i++) {
        val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        if (val < 0) {
            val += 5;
        }
        else if (val > 100) {
            val -= 5;
        }
        data.addRow([new Date(2013, 0, 1, i), val]);
    }

    // the time entered was supposed to be UTC time, but is entered as local time
    // this function updates the Date objects to the proper UTC time
    function localDateToUTCDate (d) {
        d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
    }
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        data.setValue(i, 0, localDateToUTCDate(data.getValue(i, 0)));
    }

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            height: 400,
            width: 600,
            vAxis: {
                minValue: 0,
                maxValue: 100
            }
        }
    });
    chart.draw();
}
google.load('visualization', '1', {packages:['controls'], callback: drawCharts});

看到它在这里工作:http://jsfiddle.net/asgallant/4vDVn/