[英]Google visualisation API - Multiple charts based on Selection
I am pretty new to Google Visualisation Charts API. 我对Google Visualization Charts API还是很陌生。 I am trying to display different charts based on dropdown selection.
我试图根据下拉选择显示不同的图表。 Chart is not getting displayed if I am adding another draw function.
如果要添加其他绘图功能,则无法显示图表。 Please find my fiddle below I have tried.
请在下面尝试的小提琴中查找。
http://jsfiddle.net/meetravi/PFa5h/5/ http://jsfiddle.net/meetravi/PFa5h/5/
JS Code: JS代码:
$(document).ready(function(){
var selectedVal = "";
$('#dashboard-chart-type').change(function(){
selectedVal = $(this).val();
alert(selectedVal);
switch(selectedVal) {
case "average":
$('#visualization').empty();
init();
break;
case "total_install":
debugger;
$('#visualization').empty();
init();
break;
case "total_uninstall":
debugger;
$('#visualization').empty();
init();
break;
default:
$('#visualization').empty();
init();
break;
}
});
if(selectedVal==""){
init();
}
});
After Long struggle made the multiple charts work based on selection. 经过长期的奋斗,使多个图表基于选择工作。 Problem was to load multiple charts you need to call the draw visualisation function through call backs.
问题是要加载多个图表,您需要通过回调来调用绘图可视化功能。 I found this useful info from google groups.
我从Google网上论坛中找到了有用的信息。
Then I added some functions init()
, init2()
...etc to load different charts . 然后我添加了一些函数
init()
, init2()
... etc来加载不同的图表。 One thing here we need to note is to call drawvisualisation()
inside init()
method, It should be called only using google.setOnLoadCallback(drawVisualization()); 这里需要注意的一件事是在
init()
方法中调用drawvisualisation()
,仅应使用google.setOnLoadCallback(drawVisualization())进行调用; rather calling google.setOnLoadCallback(drawVisualization); 而不是调用google.setOnLoadCallback(drawVisualization); as mentioned in the google playground examples.
如Google操场示例中所述。
function init(){
google.setOnLoadCallback(drawVisualization());
}
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
Call was not happening when I tried to use the code google.setOnLoadCallback(drawVisualization) which was spoiling my graph by not displaying. 当我尝试使用代码google.setOnLoadCallback(drawVisualization)时,未发生调用,该代码通过不显示破坏了我的图表。
Here is my fiddle which works based on selection. 这是我根据选择工作的小提琴。 http://jsfiddle.net/meetravi/PFa5h/6/
http://jsfiddle.net/meetravi/PFa5h/6/
Here In the above fiddle I made to load different types of charts like Line,Column, Stacked etc... 在上面的小提琴中,我加载了不同类型的图表,例如折线图,列图,堆积图等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.