谷歌图表，在一页上加载不同的图表

我想加载一个谷歌图表在一个页面上的数量，但是我摔倒试图添加第二个。谷歌图表，在一页上加载不同的图表

我，但是只要我去掉了测试新的谷歌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>

来源

2013-08-06 confidentjohn

你有一个额外的“}”的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/

来源

2013-08-06 16:34:32 asgallant

令人惊叹的，谢谢。我可以问最后一个问题吗？如果我想要不同的数据源，我该怎么办？说这个网址以及https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDonQoM&format=data-table-response – confidentjohn

有多个查询运行时，有些东西不适用于该数据源，我不确定确切地说问题出在哪里，但我认为数据源忽略了请求ID参数，这会在第一次炸弹爆炸后引起任何查询。 – asgallant

感谢您的回复，我试过的任何方式都无法获得第二张图。真的很感谢你看看。谢谢。 – confidentjohn

有一个在谷歌的错误Analytics SuperProxy代码，可停止在单个页面上运行多个图表。现在已经更新了，githb的html示例如下。

非常感谢这位没有他的评论的未成年人，我不知道该怎么搜索才能回答这个问题。

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

来源

2013-08-07 09:23:02 confidentjohn

谷歌图表，在一页上加载不同的图表

回答

相关问题