You need to load the table package alongside the corechart package:
google.load('visualization', '1', {packages: ['corechart', 'table']});
On Wednesday, April 18, 2012 12:30:02 PM UTC-4, Humble Beginnings wrote:
>
> 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>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/6IaszOYaZewJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
