谷歌图表仪表板使用谷歌表 [英] google charts dashboard using google sheet
本文介绍了谷歌图表仪表板使用谷歌表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在使用Google表格开发Google图表仪表板时遇到问题。我能够找到的唯一例子就像下面那些你必须手动创建数据的例子。是否有人能够告诉我如何使用Google表格中的数据实现下面的功能？
感谢您提前
< html> < HEAD>
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>
< script type =text / javascript>
//加载可视化API和控件包。
google.charts.load（'current'，{'packages'：['controls']}）;
//设置回调以在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawDashboard）;
//创建并填充数据表的回调，
//实例化仪表板，范围滑块和饼图，
//传入数据并绘制它。
函数drawDashboard（）{
//创建我们的数据表。
var data = google.visualization.arrayToDataTable（[
['Name'，'Donuts eaten']，
['Michael'，5]，
['Elisa'， 7]，
['Robert'，3]，
['John'，2]，
['Jessica'，6]，
['Aaron'，1] ，
['Margareth'，8]
]）;
//创建仪表板。
var dashboard = new google.visualization.Dashboard（
document.getElementById（'dashboard_div'））;
//创建一个范围滑块，传递一些选项
var donutRangeSlider = new google.visualization.ControlWrapper（{$ b $'controlType'：'NumberRangeFilter'，
' containerId'：'filter_div'，
'options'：{$ b $'filterColumnLabel'：'Donuts eaten'
}
}）;
//创建一个饼图，传递一些选项
var pieChart = new google.visualization.ChartWrapper（{$ b $'chartType'：'PieChart'，
' containerId'：'chart_div'，
'options'：{
'width'：300，
'height'：300，
'pieSliceText'：'value'，
'legend'：'right'
}
}）;
//建立依赖关系，声明'过滤'驱动'pieChart'，
//这样饼图将只显示通过
获得的条目//给定选择滑块范围。
dashboard.bind（donutRangeSlider，pieChart）;
//绘制仪表板。
dashboard.draw（data）;
}
< / script>
< / head>
< body>
<！ - 将保存仪表板的Div - >
< div id =dashboard_div>
<！ - 将容纳每个控件和图表的div - >
< div id =filter_div>< / div>
< div id =chart_div>< / div>
< / div>
< / body>
< / html>
解决方案
感谢WhiteHat
我找到了一个解决方案：
google.load（'visualization'，'1.1'，{'packages '：[' 控制， '应用于LineChart']}）;
//设置回调以在加载Google Visualization API时运行。
google.setOnLoadCallback（initialize）;
函数initialize（）{
//将下一行的数据源URL替换为您的数据源URL。
var query = new google.visualization.Query（'https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing'）;
//用回调函数发送查询。
query.send（drawDashboard）;
}
函数drawDashboard（response）{
var data = response.getDataTable（）;
//一切都已加载。组装你的仪表板...
var namePicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'filter_div'，
'选项'：{
'filterColumnLabel'：'Name'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false
}
}
}）;
var laptimeChart = new google.visualization.ChartWrapper（{$ b $'chartType'：'LineChart'，
'containerId'：'chart_div'
}）;
var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））。
绑定（namePicker，laptimeChart）。
draw（data）
}
I'm having trouble with developing a Google Charts Dashboard using a Google Sheet. The only examples I'm able to find are ones like the below where you have to manually create the data. Is anyone able to show me how to achieve the below using data from a Google Sheet?
Thanks in advance
<html> <head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
解决方案
Thanks WhiteHat
I found a solution:
google.load('visualization', '1.1', {'packages':['controls','linechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initialize);
function initialize() {
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing');
// Send the query with a callback function.
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
// Everything is loaded. Assemble your dashboard...
var namePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Name',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var laptimeChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div'
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind(namePicker, laptimeChart).
draw(data)
}
这篇关于谷歌图表仪表板使用谷歌表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
