Google可视化图表数据范围

时间:2015-02-16 04:38:28

标签: charts google-visualization

我有这段代码,

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E/edit#gid=0');
  query.setQuery('order by A');
  query.send(handleQueryResponse);
}

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

  var options = {
          title: 'TEMP & HUMID',
    hAxis: {
        direction: -1
        },
    legend: 'none'

      };

  var data = response.getDataTable();
  var chart = new google.visualization.LineChart(document.getElementById('columnchart'));
  chart.draw(data, options);
}
</script>

<title>Data from a Spreadsheet</title>
</head>

<body>
    <div id="columnchart" style="width: 900px; height: 500px"></div>
</body>
</html>

这是我的电子表格数据:https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E

我想要做的是绘制最后5个数据。我的电子表格中的即第8行 - 第12行

我尝试了限制和范围查询,但我想要做的是,如果有新数据进入,我希望图表引用更新的最后5个数据 ie)第9行-13

我怎么能实现这个目标?

1 个答案:

答案 0 :(得分:0)

我不知道这是否是最佳方法,但我会解决这个问题。

因此,在绘制表格之前,我实际上是以JSON格式调用电子表格并检索其列长度。

然后我用我想要显示的数据(限制查询)减去列长度,这将使我开始偏移。

然后我创建了一个带有limit和offset值的字符串,将查询选项传递给query.setQuery。

以下是该部分的代码。

function drawChart() {
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1NSEbUWojJsMzhH0hi8kx8ic7Xxuq29z0c7BXs-inzb8/edit#gid=0');
    $.getJSON("https://spreadsheets.google.com/feeds/list/1NSEbUWojJsMzhH0hi8kx8ic7Xxuq29z0c7BXs-inzb8/od6/public/basic?hl=en_US&alt=json", function(data) {
    colLen = data.feed.entry.length;
    console.log(colLen);
    limit = 4;
    var offset = colLen - limit;
    console.log(offset);
    queryOption = "limit "+limit+" offset "+offset;
    console.log(queryOption);

    query.setQuery(queryOption);
    query.send(handleQueryResponse);
    });
}