CODEWITHSUNDEEP
chartsgoogle-visualizationgoogle-analytics-api
confidentjohn
confidentjohn

Reputation: 125

Google Charts, Load Different Charts on One Page

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>

Upvotes: 0

Views: 5113

Answers (2)

confidentjohn
confidentjohn

Reputation: 125

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>

Upvotes: 1

asgallant
asgallant

Reputation: 26340

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/

Upvotes: 2

Related Questions