Re: Multiple charts on a page using ChartWrapper

[asgallant]

It seems to work just fine: http://jsfiddle.net/asgallant/WdhM5/

On Tuesday, October 2, 2012 8:09:35 AM UTC-4, Gareth wrote:

Hi,

I'm trying to produce an "At a Glance" status screen which will have various graphs displayed on it.

Here is an extract of my code from my test system (i.e. dummy data):

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
<!--
	google.load('visualization', '1', null);

	function drawGraphs() {
		var wrapper = new google.visualization.ChartWrapper({
			chartType: 'Gauge',
			dataTable: [
				['Label', 'Internal', 'Label', 'External'],
				['Internal', 2, 'External', 1]
			],
			options: {
				min: 0,
				max: 3,
				minorTicks: 10
			},
			containerId: 'user_graphs_div'
		});

		wrapper.draw('user_graphs_div');

		
		delete wrapper;

		wrapper = new google.visualization.ChartWrapper({
			chartType: 'BarChart',
			dataTable: [
				[ '', 'Site 1' ],
[ '', 21 ]

			],
			options: {
				isStacked: true,
				min: 0,
				max: 24,
				title: 'Jobs by Site',
				vAxis: {title: ''},
				height: 125,
				width: 300,
				legend: {position: 'bottom', alignment: 'center'}
			},
			containerId: 'sites_graph_div'
		});

		wrapper.draw('sites_graph_div');
		

		
		delete wrapper;

		wrapper = new google.visualization.ChartWrapper({
			chartType: 'ColumnChart',
			dataTable: [
				[ '', 'Someone' ],
[ '', 21 ]

			],
			options: {
				min: 0,
				max: 24,
				title: 'Top 5 Creators Today',
				vAxis: {title: ''},
				height: 125,
				width: 300,
				legend: {position: 'bottom', alignment: 'center'}
			},
			containerId: 'creators_graph_div'
		});

		wrapper.draw('creators_graph_div');
		

		
		delete wrapper;

		wrapper = new google.visualization.ChartWrapper({
			chartType: 'BarChart',
			dataTable: [
				[ '', 'Type 1', 'Type 2' ],
				[ '', 21, 3 ]
			],
			options: {
				isStacked: true,
				min: 0,
				max: 24,
				title: 'Jobs by Type',
				vAxis: {title: ''},
				height: 400,
				width: 600,
				legend: {position: 'bottom', alignment: 'center'}
			},
			containerId: 'jobtype_graph_div'
		});

		wrapper.draw('jobtype_graph_div');
		
	}

	google.setOnLoadCallback(drawGraphs);
-->
</script>


<table class="listview" width="100%">
	<tr>
		<td style="width: 326px; height: 250px; padding: 0;" align="center">
			<font size="16"><b>Jobs so far today</b></font>
			<br />
			<br />
			<font size="16" color="gray"><b>24</b></font>
			<br />
			<br />
			<div id="jobtype_graph_div" style="width: 300px; height: 150px; position: relative;"></div>
		</td>
		<td style="width: 326px; height: 250px; padding: 0;" align="center">
			<div id="sites_graph_div" style="width: 300px; height: 125px; position: relative;"></div>
			<div id="creators_graph_div" style="width: 300px; height: 125px; position: relative;"></div>
		</td>
		<td style="width: 326px; height: 250px; padding: 0;" align="center">
			<font size="16"><b>Users so far today</b></font>
			<br />
			<br />
			<font size="16" color="gray"><b>3</b></font>
			<br />
			<br />
			<div id="user_graphs_div" style="width: 300px; height: 115px; position: relative;"></div>
		</td>
	</tr>
</table> 

When I load the page the Gauge graph displays fine, but the various BarChart and ColumnChart display as:

<div style="display: block; padding-top: 2px;" id="google-visualization-errors-all-5">
<div style="font: 0.8em arial,sans-serif; margin-bottom: 5px;" id="google-visualization-errors-4">
<span style="background-color: rgb(192, 0, 0); color: white; padding: 2px;">b is undefined
<span style="font-size: 1.1em; font-weight: bold; cursor: pointer; padding-left: 10px; color: black; text-align: right; vertical-align: top;">×</span>
</span>
</div>
</div>

If I copy and paste the various charts into the google playground then they work perfectly.

Has anyone got any ideas what I'm doing wrong and how I can fix?

Thanks!