0

我一直在基于这个 codelab 开发我的 App Engine 应用程序的前端。我有一个文本框，您可以在其中输入股票代码（例如 AMZN 或 GOOG），它使用它作为标准在后台运行对 Google BigQuery 的查询，然后它应该在几天内显示推文计数谷歌可视化 API折线图。

但是，根据我在页面源代码中看到的内容，它不会将查询结果从 BigQuery 拉到数据模板变量 {{ data }} 中。这是我的 HTML 代码（称为 index1.html），大部分类似于 codelab 的：

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!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>
  Jibdan Analytics
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">

  countdata = {{ data }}

  function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.DataTable(query_response);

    // Create and draw the visualization.
    var chart = new google.visualization.LineChart(document.getElementById('visualization'));
      chart.draw(data, {title: "Tweets by Day by Ticker", 
          curveType: "function",
                    width: 800, height: 600}
            );
  }


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

在查看折线图的 Google Code Playground 代码后，我弄乱了 html 和 Javascript，但实际上问题似乎出在该模板变量上。

这里也是相关的 Python 代码。第一种方法应该采用 BigQuery 响应并将其放入可视化 API 应提取的格式以生成折线图。get 方法具有要运行的查询字符串并将结果呈现到模板 index1.html 中。很像代码实验室：

class QueryHandler(webapp2.RequestHandler):

def _bq2line(self, bqdata):
    logging.info(bqdata)
    columnNameDate = bqdata['schema']['fields'][0]['name']
    columnNameVal = bqdata['schema']['fields'][1]['name']
    logging.info("Column Names=%s, %s" % (columnNameDate, columnNameVal))
    countdata = { 'cols': ({'id':columnNameDate, 'label':columnNameDate, 'type':'string'},
      {'id':columnNameVal, 'label':columnNameVal, 'type':'number'})}
    countdata['rows'] = [];
    logging.info(countdata)
    for row in bqdata['rows']:
        newrow = ({'c':[]})
        newrow['c'].append({'v': row['f'][0]['v']})
        newrow['c'].append({'v':row['f'][1]['v']})
        countdata['rows'].append(newrow)
    logging.info('FINAL COUNTDATA---')
    logging.info(countdata)
    self.response.out.write(countdata)
    return json.dumps(countdata)

def get(self):

    QUERY = """
            SELECT STRFTIME_UTC_USEC(querydate, "%Y-%m-%d") AS tweet_date, COUNT(tweet_id) AS tweet_count 
            FROM [jibdantweetstream.tweetdata_09_21_2013]  
            WHERE gcs_load = true AND (REGEXP_MATCH(ticker, '""" + self.request.get('stock') + """')) 
            GROUP BY tweet_date 
            ORDER BY tweet_date
            """                

    try:
        query_request = bigquery_service.jobs()
        query = {'data': self._bq2line(bq.Query(QUERY, BILLING_ID)),
                 'query': QUERY}
        query_response = query_request.query(projectId=BILLING_ID,
                                         body=query).execute()
        template = os.path.join(os.path.dirname(__file__), 'result1.html')
        self.response.out.write(render(template, query_response))

    finally:
        self.response.out.write('<a href="/">Click here</a> to go back to the Search page. ')

所以，这就是我所拥有的。你会看到我有几个self.response.out.write语句，因为我想看看我是否收到了带有查询结果的回复。我得到了结果，所以我知道这不是 OAuth2 问题。我只是不知道还能是什么。

提前谢谢了。

4

2 回答 2

0

在您的代码中：

countdata = { 'cols': ({'id':columnNameDate, 'label':columnNameDate, 'type':'string'},
  {'id':columnNameVal, 'label':columnNameVal, 'type':'number'})}

它应该是：

countdata = { 'cols': [{'id':columnNameDate, 'label':columnNameDate, 'type':'string'},
  {'id':columnNameVal, 'label':columnNameVal, 'type':'number'}]}
于 2013-11-10T17:21:11.013 回答
0

“查看源代码”，再加上一些可以告诉你 JavaScript 中的语法错误的东西（Firebug、Chrome 开发者工具）是你的朋友。查看您提供的内容，我猜扩展{{ data }}会导致语法错误。正如 asgalant 所指出的，您正在设置countdata但引用query_response。

由于您的数据是日期和计数，因此您不会遇到实体转义问题，但如果您扩展查询以包含其他内容，您将遇到{{ data }}HTML 转义问题，它需要为 JS 逃跑。要处理这个问题，您需要escapejs过滤器。

于 2013-10-29T05:57:49.767 回答