谷歌图表，加载在一页上不同的图表(Google Charts, Load Different Cha

我尝试加载一个页面上的一些谷歌的图表，但是我摔倒试图添加第二个。

我测试了新的谷歌Analytics（分析）superProxy的功能，因此正在从dataSourceURL得出的数据

我的代码如下，因为是代码的作品，但只要我取消了部分一切加载失败，对我的生活我无法弄清楚如何解决这个问题。

希望有人能提供帮助。

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

Answer 1:

你有一个额外的“}”后data1.draw(); 线，这是关闭drawCharts功能。删除允许查询运行，但你最终用两个图表发出查询到相同的源相同数据之间的冲突。由于他们都流失了相同的数据，是有意义的使用一个查询填充在同一时间两个图表：

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

看到它在这里工作： http://jsfiddle.net/asgallant/j5eea/

Answer 2:

有没有在谷歌Analytics（分析）superProxy的代码，停止多个图表从一个单一的网页上运行的错误。现在这已得到更新，从githb例如HTML如下。

感谢负荷asgallant为寻找到这一点没有他的话我不会有知道该怎么寻找到回答这个问题。

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