I am using Google visualization api. Following is my sample code. Either of the two charts can be shown if it is the only one to be drawn. But I can not get both working. Thanks for your advice.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Home Page</title>
<!--Load the AJAX API-->
<script type="text/javascript" src=""></script>
<script type="text/javascript">
//Load the Visualization API and the ready-made Google table visualization
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type='text/javascript'>
function drawA() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl');
wrap.setContainerId('checkin-column');
wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
wrap.draw();
wrap.getChart();
}
function drawB() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl2');
wrap.setContainerId('redemption-table');
wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
wrap.draw();
}
function drawVisualization() {
drawA();
drawB();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
</body>
</html>
I am using Google visualization api. Following is my sample code. Either of the two charts can be shown if it is the only one to be drawn. But I can not get both working. Thanks for your advice.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Home Page</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//Load the Visualization API and the ready-made Google table visualization
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type='text/javascript'>
function drawA() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl');
wrap.setContainerId('checkin-column');
wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
wrap.draw();
wrap.getChart();
}
function drawB() {
// Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl2');
wrap.setContainerId('redemption-table');
wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
wrap.draw();
}
function drawVisualization() {
drawA();
drawB();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
</body>
</html>
3 Answers
Reset to default 12The problem is in your divs.
Replace this:
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
With this:
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
Probably not your problem, but on a related note, I have found that if you have lots of Google Visualizations on the same page ( I believe that it was in the neighborhood of 50) , Google will throttle the usage, and stop rendering properly.
Just throwing down some information that relates to a problem I had (not the OP's exact Q).
When you want to draw multiple charts on one page, you must use different ids for the divs your targeting (duh!) . So if you have a page that should have multiple charts but only 1 (or N < expected) is rendering, double check that there is a unique div id for each chart and that the JavaScript targets a unique div id.
Eg, the following will render only one chart:
<div id="chart"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 1.0, 2.0]
]);
var options = {
title: 'MyChart',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 4.0, 5.0]
]);
var options = {
title: 'MyChart2',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
wrap.getChart();indrawA()– Joe Commented Jul 15, 2011 at 15:47