将数据存储区中的数据读入 Google Charts Datatable 以绘制图表答案

【问题标题】：read data from datastore into Google Charts Datatable to plot Graphs将数据存储区中的数据读入 Google Charts Datatable 以绘制图表
【发布时间】：2013-10-29 19:37:18
【问题描述】：

我正在尝试从我的 Google App Engine 应用程序的数据存储区中读取数据，用它填充 google 图表数据表，然后使用来自 google charts example 的源代码将整个事情可视化为图形，该源代码使用嵌入在网页。

我的问题是获取数据。我想到了两种方法：要么直接在 javascript 代码中运行查询，要么从 python 代码运行查询，将该查询的结果作为模板值发送到 html 代码，过滤它以获取值 I'我感兴趣并以某种方式将整个事情传递给javascript代码，然后显示数据（看起来更复杂）。我已经尝试了第一个选项，但它似乎不起作用。由于我不确定我的数据存储区的 URL 是什么，我认为它与使用它的服务器相同，因此我将 appengine 应用程序的 URL 作为参数传递给查询函数。我试图对此运行 SQL 查询，但出现错误。下面是对应的JS代码（单独）和整个HTML代码

function drawVisualization() {

  var query = new google.visualization.Query('http://davidfirstapp.appspot.com');

  query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');

  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
     alert('Error in query: ' + response.getMessage() + ' ' +     response.getDetailedMessage());
     return;
  }
  var data = response.getDataTable();
  visualization = new google.visualization.LineChart(document.getElementById('visualization'));
  visualization.draw(data, {legend: 'bottom'});
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['linechart']});
    </script>
    <script type="text/javascript">
    var visualization;

    function drawVisualization() {

      var query = new google.visualization.Query('http://davidfirstapp.appspot.com');


      query.setQuery('SELECT ac_current1, ac_voltage1 ORDER BY ac_current1 LIMIT 10');


      query.send(handleQueryResponse);
    }

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

     var data = response.getDataTable();
     visualization = new google.visualization.LineChart(document.getElementById('visualization'));
     visualization.draw(data, {legend: 'bottom'});
    }


    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="height: 400px; width: 400px;"></div>
  </body>
</html>

【问题讨论】：

标签： sql google-app-engine google-visualization google-cloud-datastore

【解决方案1】：

您不能查询自己的网页并期望它以某种方式连接到数据存储区。您的网页包含您自己定义的 html 输出。阅读有关 appengine / Web 应用程序以及数据存储如何工作的更多信息。您需要从前端进行数据存储查询，而不是浏览器 js。构建一个表格并将其传递给浏览器，在该浏览器中构建数据表和图表。

【讨论】：

那么你建议我使用第二个选项吗？这意味着我从我的 python 代码运行查询然后将结果（也就是表）传递给 html 代码？我觉得这一步有点复杂。你能帮我看看吗？
是的，这就是我的建议。它真的不仅仅是一个建议的唯一方法:)