CODEWITHSUNDEEP
javascriptgoogle-visualization
Buzzy Hopewell
Buzzy Hopewell

Reputation: 155

google visualization multiple charts with own data queries

On my Google Visualization web page I want both a bar chart and an area chart but I can get only one or the other to display.

Each chart requires its own data and employs its own google.visualization.Query object against my own Python-based server. My initialize function calls the function to display the first chart, and at the bottom of the query response handler for the first chart, I'm calling the function to display the second chart. (I am doing this to make sure my second data query does not start until after the first chart is done drawing.) Each chart displays correctly when I code to draw only one chart at a time. But when I try to draw both charts, only the first chart ever draws even though I am verifying that both data queries are running and returning valid json responses, at the correct times.

Thanks for any help, BH

Edit 10/27/2013:

This post solved my problem:

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

To anyone implementing a Python data source, parse the reqId parameter like this:

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

And pass it to the ToJSonResponse call:

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

Here is my updated code, which also uses the "ready" event.

<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>

Upvotes: 0

Views: 1759

Answers (1)

Buzzy Hopewell
Buzzy Hopewell

Reputation: 155

The solution was for my Python data source to pass the reqId parameter from the request back on the json reqponse. This post solved my problem:

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

Upvotes: 2

Related Questions