Google Charts, Load Different Charts on One Page

Question

I am trying to load a number of google charts on one page, however I am falling over trying to add the second.

I am testing the new Google Analytics SuperProxy feature, so the Data is being drawn in from a dataSourceURL

My code is below, as is the code works, however as soon as I uncomment out the section everything fails to load and for the life of me I cannot figure out how to fix this.

Hope someone can help.

<html>
<head>
    <title>jmit</title>

<script type="text/javascript"
  src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","geochart"]}]}'>
</script>

<script type="text/javascript">

google.setOnLoadCallback(drawCharts);


function drawCharts(){
    /*var data1 = new google.visualization.ChartWrapper({
        "containerId":"Chart1_div",
        "dataSourceUrl":"https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response",
        "refreshInterval":3600,
        "chartType":"GeoChart",
        "options":{
            "width": 630,
            "height": 440,
            "title": "test"
            }
    });
    data1.draw();
    }
*/
    var data2 = new google.visualization.ChartWrapper({
        "containerId":"Chart2_div",
        "dataSourceUrl":"https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response",
        "refreshInterval":3600,
        "chartType":"ColumnChart",
        "options":{
            "width": 630,
            "height": 440,
            "title": "test"
            }
    });
    data2.draw();
    }
</script>






</head>
<body>
    <h1>Test</h1>
    <div id="Chart1_div"></div>
    <p></p>
    <div id="Chart2_div"></div>

</body>
</html>

score 2 · Accepted Answer · answered Aug 06 '13 at 16:34

2

You have an extra "}" after the data1.draw(); line, which is closing the drawCharts function. Removing that allows the queries to run, but you end up with conflicts between the two charts sending out queries to the same source for the same data. Since they are both running off the same data, it makes sense to use one query that populates both charts at the same time:

function drawCharts(){
    var query = new google.visualization.Query('https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response');
    query.setRefreshInterval(3600);
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var dataTable = response.getDataTable();
        var data1 = new google.visualization.ChartWrapper({
            "containerId":"Chart1_div",
            "dataTable":dataTable,
            "refreshInterval":3600,
            "chartType":"GeoChart",
            "options":{
                "width": 630,
                "height": 440,
                "title": "test"
            }
        });
        data1.draw();

        var data2 = new google.visualization.ChartWrapper({
            "containerId":"Chart2_div",
            "dataTable":dataTable,
            "refreshInterval":3600,
            "chartType":"ColumnChart",
            "options":{
                "width": 630,
                "height": 440,
                "title": "test"
            }
        });
        data2.draw();
    });
}

see it working here: http://jsfiddle.net/asgallant/j5eea/

answered Aug 06 '13 at 16:34

asgallant

26,060
6
72
87

Amazing, Thank you. Could I ask one last question? What would i do if I wanted different data sources? say this URL as well https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDonQoM&format=data-table-response – confidentjohn Aug 06 '13 at 16:56
Something isn't working right with that data source when there are multiple queries run, and I'm not sure exactly where the problem is, but I think that the data source is ignoring the request id parameter, which is causing any queries after the first to bomb. – asgallant Aug 06 '13 at 17:33
Thanks for the reply, any which way I try I can't get a second chart. Really appreciate you having a look though. Thank you. – confidentjohn Aug 06 '13 at 18:26
Do you own that data source, or is it from a 3rd party? If it's yours, I suggest doing some debug work to figure out what is going on behind the scenes. – asgallant Aug 06 '13 at 18:31
I confirmed that the data source is ignoring the reqId parameter (which is used by the API to distinguish between multiple concurrent requests). According to the documentation (https://developers.google.com/chart/interactive/docs/dev/implementing_data_source#requestformat), the data source must accept the "tqx" parameter (which contains semicolon-separated key:value pairs, one of which is reqId). You should modify (or prompt the data source owners to modify) the data source to accept the reqId and pass it back in the response, per the documentation. – asgallant Aug 06 '13 at 18:42
Thank you again, i did some digging, there was a bug in the new analytics superproxy that meant this failed as tqx support wasnt implemented. They fixed it 7 hours ago, just need to update my files from github tomorrow morning (https://github.com/googleanalytics/google-analytics-super-proxy/commit/929937a0efa67427b3c8186dfc4a66766c3cd947) Really appriciate your help. – confidentjohn Aug 06 '13 at 22:43

score 1 · Answer 2 · answered Aug 07 '13 at 09:23

There was a bug in the Google Analytics SuperProxy code which stopped multiple charts from running on a single page. This has now been updated, example html from githb is below.

Loads of thanks to asgallant for looking into this without his comments I wouldnt have know what to search for to answer this.

    <! --
  Based on demo video: https://www.youtube.com/watch?v=8Or8KIhpsqg
  This shows you how to power 2 Pie Charts using the Google Analytics
  superProxy. Each chart uses, as a data source, a public superProxy URL
  with the format set to Data Table Response.
-->
<html>
<head>
  <title>Pie!</title>

  <!--Load the AJAX API-->
  <script type="text/javascript"
    src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
  </script>

  <!-- Visualization -->
  <!-- https://developers.google.com/chart/interactive/docs/reference#google.visualization.drawchart -->
  <script type="text/javascript">
    google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {

      var browserWrapper = new google.visualization.ChartWrapper({
          // Example Browser Share Query
         "containerId": "browser",
                          // Example URL: http://your-application-id.appspot.com/query?id=QUERY_ID&format=data-table-response
         "dataSourceUrl": "REPLACE WITH Google Analytics superProxy PUBLIC URL, DATA TABLE RESPONSE FORMAT",
         "refreshInterval": REPLACE_WITH_A_TIME_INTERVAL,
         "chartType": "PieChart",
         "options": {
            "showRowNumber" : true,
            "width": 630,
            "height": 440,
            "is3D": true,
            "title": "REPLACE WITH TITLE"
         }
       });

      var countryWrapper = new google.visualization.ChartWrapper({
        // Example Country Share Query
         "containerId": "country",
         "dataSourceUrl": "REPLACE WITH Google Analytics superProxy PUBLIC URL, DATA TABLE RESPONSE FORMAT",
         "refreshInterval": REPLACE_WITH_A_TIME_INTERVAL,
         "chartType": "PieChart",
         "options": {
            "showRowNumber" : true,
            "width": 630,
            "height": 440,
            "is3D": true,
            "title": "REPLACE WITH TITLE"
         }
       });

      browserWrapper.draw();
      countryWrapper.draw();

    }
  </script>
</head>
<body>
  <h1>Pie!</h1>
  <div id="browser" style="margin:auto;width:630px;"></div>
  <div id="country" style="margin:auto;width:630px;"></div>
</body>
</html>

Google Charts, Load Different Charts on One Page

2 Answers2

Linked