Question

在我的Google可视化网页上，我想要条形图和区域图，但我只能显示其中一个。

每个图表都需要自己的数据，并对我自己的基于Python的服务器使用自己的google.visualization.Query对象。我的initialize函数调用函数显示第一个图表，在第一个图表的查询响应处理程序的底部，我调用函数显示第二个图表。（我这样做是为了确保我的第二个数据查询在第一个图表完成绘图之后才开始。）当我编码一次只绘制一个图表时，每个图表都会正确显示。但是当我尝试绘制两个图表时，只有第一个图表才会绘制，即使我在正确的时间验证两个数据查询都在运行并返回有效的json响应。

感谢任何帮助，BH

编辑2013年10月27日：

这篇文章解决了我的问题：

Google Charts - "Missing Query for request id: 0"

对于实现Python数据源的任何人，解析reqId参数，如下所示：

import cgi 
form = cgi.FieldStorage() 
tqx = form.getvalue("tqx") # tqx comes back like "reqId:1" 
req_id = int(tqx[tqx.find("reqId"): ].split(":")[1])

并将其传递给ToJSonResponse电话：

response = data_table.ToJSonResponse(req_id=req_id,
                            columns_order=("vehicle_id", "num_events"))
print "Content-type: text/plain" 
print
print response

这是我更新的代码，它也使用“就绪”事件。

<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(initialize);

      var timelineDate1 = "";
      var messageCountsDate1 = "";
      var timeline_drawn = false;
      var message_count_drawn = false;

      function initialize()
      {
        drawTimeline();
      }

      function drawTimeline()
      {
          var rows = QueryString.rows || "4";
          var date1 = QueryString.date1 || "2013-9-1"; // Date start
          timelineDate1 = date1;
          var page = parseInt(QueryString.page) || 1;
          if (page < 1)
          {
            page = 1;
          }

          // Timeline
          var url_timeline = "http://localhost/emit_event_timeline.py"
             + "?date1=" + date1 + "&rows=" + rows + "&page=" + page;
          var query_timeline = new google.visualization.Query(url_timeline);
          query_timeline.setTimeout(14400);
          query_timeline.send(handleTimelineQueryResponse);
        }

      function handleTimelineQueryResponse(response)
      {
          var stack = parseInt(QueryString.stack) || 1
          var timeline_options =
          {
              title: 'Event Count Timeline, ' + timelineDate1 + ' to Present',
              vAxis: {title: 'Date',  titleTextStyle: {color: 'red'}},
              hAxis: {title: 'Event Count',  titleTextStyle: {color: 'blue'}},
              isStacked: stack
          };
          if (response.isError())
          {
              alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
              return;
          }

          var timeline_data_table = response.getDataTable();
          var timeline_chart = new google.visualization.AreaChart(document.getElementById('timeline_div'));
          google.visualization.events.addListener(timeline_chart, 'ready', timeline_chart_ready);
          google.visualization.events.addListener(timeline_chart, 'error', errorHandler);
          timeline_chart.draw(timeline_data_table, timeline_options);
      }

      function timeline_chart_ready()
        {
          timeline_drawn = true;
          if (!message_count_drawn)
          {
            drawMessagecounts();
          }
        }

      function mc_chart_ready()
        {
          message_count_drawn = true;
          if (!timeline_drawn)
          {
            drawTimeline();
          }
        }

      function drawMessagecounts()
      {
          var rows = QueryString.rows || "20";
          var date1 = QueryString.date1 || "2013-9-1"; // Date start
          messageCountsDate1 = date1
          var page = parseInt(QueryString.page) || 1;
          if (page < 1)
          {
            page = 1;
          }

          // Message counts
          var url_message_counts = "http://localhost/emit_all_message_counts.py"
             + "?date1=" + date1 + "&page=" + page + "&rows=" + rows;
          var query_message_counts = new google.visualization.Query(url_message_counts)
          query_message_counts.setTimeout(14400);
          query_message_counts.send(handleMessageCountQueryResponse);
      }

      function handleMessageCountQueryResponse(response)
      {
          var stack = parseInt(QueryString.stack) || 1
          var mc_options =
          {
              title: 'Message Counts, ' + messageCountsDate1 + ' to Present',
              vAxis: {title: 'Message Source',  titleTextStyle: {color: 'red'}},
              hAxis: {title: 'Message Count',  titleTextStyle: {color: 'blue'}},
              isStacked: stack
          };
          if (response.isError())
          {
              alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
              return;
          }

          var mc_data_table = response.getDataTable();
          var mc_chart = new google.visualization.BarChart(document.getElementById('message_count_div'));
          google.visualization.events.addListener(mc_chart, 'ready', mc_chart_ready);
          google.visualization.events.addListener(mc_chart, 'error', errorHandler);
          mc_chart.draw(mc_data_table, mc_options);

      }

      // Thanks to:
      // https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
      var QueryString = function ()
        {
            // This function is anonymous, is executed immediately and
            // the return value is assigned to QueryString!
            var query_string = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                    // If first entry with this name
                if (typeof query_string[pair[0]] === "undefined") {
                  query_string[pair[0]] = pair[1];
                    // If second entry with this name
                } else if (typeof query_string[pair[0]] === "string") {
                  var arr = [ query_string[pair[0]], pair[1] ];
                  query_string[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                  query_string[pair[0]].push(pair[1]);
                }
          }
        return query_string;
        } ();


      function errorHandler(e)
      {
          // Called when an error occurs during chart processing
          alert('Error handler: ' + e.message);
      }

    </script>
    </head>
    <body>
      <div id="timeline_div" style="width:800px;height:500px;border:1px solid gray;float:left">
      </div>
      <div id="message_count_div" style="width:800px;height:500px;border:1px solid gray;float:left">
      </div>
      <div id="control_div" style="width:80px;height:60px;float:left">
      </div>
    </body>
</html>

Answer 1

我的Python数据源的解决方案是在json reqponse上传回请求中的reqId参数。这篇文章解决了我的问题：

Google Charts - "Missing Query for request id: 0"

谷歌可视化多个图表与自己的数据查询

1 个答案: