来自单个Google Sheet的多个图表赢得't显示
Multiple charts from single Google Sheet won't display
我正在使用图表库和谷歌电子表格作为数据源,用谷歌分析数据构建一个仪表板。我为每个图表设置了一个函数,每个图表都有自己的查询表。就个人而言,一切都是可行的。当我一起运行它们时,我会间歇性地只得到第二个图表或数据错误Pie chart should have a first column of type string
。
我看到了一些暗示这个问题的答案,但没有任何帮助解决这个问题。
以下是我迄今为止绘制这两个图表的javascript:
// Load Charts and the corechart package.
google.charts.load('current', {'packages': ['corechart']});
// Draw the line chart for Reach when Charts is loaded.
google.charts.setOnLoadCallback(drawcpReach);
// Draw the pie chart for the UserType when Charts is loaded.
google.charts.setOnLoadCallback(drawcpUserType);
// Callback that draws the line chart for Reach.
function drawcpReach() {
// Create the data table for Reach.
var queryString = encodeURIComponent('SELECT A, B, C, D');
var sheetName = 'cp_data'
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?sheet=' + sheetName + '&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set options for Reach.
var options = {
height: 450,
legend: {
position: 'none'
},
colors: ['#68b3c8', '#eb5e28', '#f3bb45']
};
// Instantiate and draw the line chart for Reach.
var chart = new google.visualization.LineChart(document.getElementById('cp-reach'));
chart.draw(data, options);
}
// Callback that draws the pie chart for UserType.
function drawcpUserType() {
// Create the data table for UserType.
var sheetName = 'cp_data'
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?sheet=' + sheetName + '&headers=1&range=E1:F3');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set options for UserType.
var options = {
height: 450,
legend: {
position: 'none'
},
colors: ['#68b3c8', '#eb5e28']
};
// Instantiate and draw the chart for UserType.
var chart = new google.visualization.PieChart(document.getElementById('user-type'));
chart.draw(data, options);
}
我还准备了一把小提琴,和我一起工作。
刚刚出现了几个"syntax'错误。。。
1.图表找不到容器
需要使用id
属性而不是class
<div id="cp-reach"></div>
与<div class="cp-reach"></div>
2.不能在同一范围内有两个同名的回调函数
将其中一个handleQueryResponse
重命名为handleQueryResponse2
3.(小问题)var gid
缺少分号var gid = '333437552';
否则,请参阅工作示例。。。
// Load Charts and the corechart package.
google.charts.load('current', {
callback: function () {
drawcpReach();
drawcpUserType();
},
packages:['corechart']
});
// Callback that draws the line chart for Reach.
function drawcpReach() {
// Create the data table for Reach.
var queryString = encodeURIComponent('SELECT A, B, C, D');
var gid = '333437552';
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?gid=' + gid +
'&headers=1&tq=' +
queryString
);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set options for Reach.
var options = {
height:450,
legend: {position: 'none'},
colors: ['#68b3c8', '#eb5e28', '#f3bb45']
};
// Instantiate and draw the line chart for Reach.
var chart = new google.visualization.LineChart(document.getElementById('cp-reach'));
chart.draw(data, options);
}
// Callback that draws the pie chart for UserType.
function drawcpUserType() {
// Create the data table for UserType.
var gid = '825312987';
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1wH9Z3hA4iwRLC5IA6z4G3EKucSmW5lvGfiAkKLDDme0/gviz/tq?gid=' + gid +
'&headers=1&range=A15:B17');
query.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set options for UserType.
var options = {
height: 450,
legend: {position: 'none'},
colors: ['#68b3c8', '#eb5e28']
};
// Instantiate and draw the chart for UserType.
var chart = new google.visualization.PieChart(document.getElementById('user-type'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="cp-reach"></div>
<div id="user-type"></div>
相关文章:
- 在angularjs/google地图中显示分支最近的路线
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- 来自单个Google Sheet的多个图表赢得't显示
- 在一个C#页面上显示多个Google图表
- 仅显示 Google 表格中来自 api 调用的最新数据行
- 在Highcharts.js上显示Google Analytics的30天流量
- JQuery 发布到 .NET MVC 应用程序以显示 Google 图表
- 显示 Google 地图上的标记数量和该标记的数据
- 使用 StageWebView.loadString() 在 AIR for iOS 上显示 Google 地图
- 在 Rails 应用程序中显示 Google Maps v3 上的标记 - 使用 Javascript 和 JSON
- 显示Google Analytics热门帖子
- 如何使用JSON以HTML格式显示Google工作表
- 突出显示Google地图api中最后单击的按钮
- 当使用Geocoder()时,MarkerWithLabel仅显示google地图api中的最后一个值
- 如何在用户按下按钮或图像后显示Google Picker API对话框
- 在GWT框架中显示Google登录页面
- 仅向搜索引擎访问者显示Google AdSense广告
- 使用html javascript向搜索引擎流量显示Google AdSense广告
- 在自定义网站上显示Google Maps Javascript API使用统计数据
- 在InfoWindow中显示Google地图标记的纬度和经度