Monday, February 26, 2024
 Popular · Latest · Hot · Upcoming
52
rated 0 times [  59] [ 7]  / answers: 1 / hits: 9866  / 10 Years ago, fri, september 26, 2014, 12:00:00

I am trying to get multiple types of Google Charts on one page. Pie graph and Calender chart. When I try to do this, I get the following error in place of the Pie Chart:



You called the draw() method with the wrong type of data rather than a DataTable or DataView


The error goes away if I only do one chart at a time. And it is always the cart on the top that shows the same error. The best I can tell its because teh data is of a different type.. So I figured it had something to do with interfering variables. I added a uniqe identifier to each chart's data and I still get the issue...



Here is the HTML output of my PHP:



<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {
packages : [ 'corechart' ]
});
google.setOnLoadCallback(drawChart_testGraph);
function drawChart_testGraph() {

var data_testGraph = google.visualization.arrayToDataTable([
[ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ],
[ 'Customer Apps', 1 ], [ 'PC Support', 0 ],
[ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ],
[ 'Executive', 4 ], [ 'Customer Service', 0 ],
[ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ],
[ 'Materials Management', 0 ], [ 'Remittance', 0 ],
[ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ],
[ 'Provisioning Support', 1 ], ]);

var options_testGraph = {
title : 'Usage by department',
backgroundColor : 'transparent',
is3D : 'false',
};

var chart_testGraph = new google.visualization.PieChart(document
.getElementById('testGraph'));

chart_testGraph.draw(data_testGraph, options_testGraph);
console.log(data_testGraph);
}
</script>
<div id='testGraph' style='width: 900px; height: 500px;'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1.1', {
packages : [ 'calendar' ]
});
google.setOnLoadCallback(drawChart_testGraph2);
function drawChart_testGraph2() {

var dataTable_testGraph2 = new google.visualization.DataTable();
dataTable_testGraph2.addColumn({
type : 'date',
id : 'Department'
});
dataTable_testGraph2.addColumn({
type : 'number',
id : 'Count'
});
dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ],
[ new Date('2014, 09, 17'), 1 ],
[ new Date('2014, 09, 15'), 6 ],
[ new Date('2014, 09, 13'), 1 ],
[ new Date('2014, 09, 12'), 2 ], ]);

var options_testGraph2 = {
title : 'Usage by department',
backgroundColor : 'white',
is3D : 'false',
};

var chart_testGraph2 = new google.visualization.Calendar(document
.getElementById('testGraph2'));

chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2);

}
</script>
<div id='testGraph2' style='width: 900px; height: 500px;'></div>
</div>


Any ideas?


More From » html

 Answers
9

That is not the right way to load google packages, you are trying to load google visualization packages 2 times, so the second one is overwriting the first one. You need to remove the second load and just load both in your first script: (or load both the 2 times)



google.load('visualization', '1', {
packages : [ 'corechart', 'calendar' ]
});

[#42250] Thursday, September 25, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yaquelina

Total Points: 517
Total Questions: 101
Total Answers: 96

Location: Egypt
Member since Tue, Jul 6, 2021
3 Years ago
;