Fifth Element - not loading in template build

12 views

Skip to first unread message

Humble Beginnings

unread,

Apr 18, 2012, 12:30:02 PM4/18/12

to Google Visualization API

I am building a template to load five charts with a certain layout.
For some perticular reason, the fifth chart (a table) in this code is
not loading. I have used sample data in the Playground, any
suggestions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data1 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var data2 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var data3 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var data4 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var data5 = google.visualization.arrayToDataTable([
['Name', 'Height', 'Smokes'],
['Tong Ning mu', 174, true],
['Huang Ang fa', 523, false],
['Teng nu', 86, true]
]);

// Create and draw the visualization.
var pie1 = new
google.visualization.PieChart(document.getElementById('pie1')).
draw(data1, {title:"Pie 1"});

var pie2 = new
google.visualization.PieChart(document.getElementById('pie2')).
draw(data2, {title:"Pie 2"});

var pie3 = new
google.visualization.PieChart(document.getElementById('pie3')).
draw(data3, {title:"Pie 3"});

var pie4 = new
google.visualization.PieChart(document.getElementById('pie4')).
draw(data3, {title:"Pie 4"});

var tablevis = new
google.visualization.Table(document.getElementById('tablevis'));
tablevis.draw(data5, null);

}

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<table>
<tr>
<td>
<div id="pie1" style="width: 600px; height: 400px;"></div>
</td>
<td>
<div id="pie2" style="width: 600px; height: 400px;"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="pie3" style="width: 1200px; height: 400px;"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="pie4" style="width: 1200px; height: 400px;"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="tablevis"></div>
</td>
</tr>
</table>
</body>
</html>

asgallant

unread,

Apr 18, 2012, 1:07:25 PM4/18/12

to google-visua...@googlegroups.com

You need to load the table package alongside the corechart package:

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

Reply all

Reply to author

Forward

0 new messages