Beginner Question - Why won't my chart display in an HTML Webpage?

57 views

Skip to first unread message

Mike

unread,

Sep 19, 2012, 5:11:55 PM9/19/12

to google-visua...@googlegroups.com

Quick question here. I've been trying to figure it out for about an hour now but haven't gotten anywhere (and getting a bit frustrated since I thought this was going to be the easy part). I finished making my first visualization using Google's API, and I am trying to figure out how to insert the javascript into the html. I've been looking into examples, and it all matches up, but mine still doesn't want to display.

Here is my code.. and thank you for any and all help!

<!--

You are free to copy and use this sample in accordance with the terms of the

Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

google.load('visualization', '1.1', {packages: ['controls']});

</script>

function drawVisualization() {

// Prepare the data

var data = google.visualization.arrayToDataTable([

['GDPvsMilitary', 'Country', 'Year', 'Amount'],

['GDP per Capita', 'United States', 2006, 42227.110],

['GDP per Capita', 'United States', 2007, 46467.480],

['GDP per Capita', 'United States', 2008, 46900.910],

['GDP per Capita', 'United States', 2009, 45348.400],

['GDP per Capita', 'United States', 2010, 46860.290],

['Military Spending per Capita', 'United States', 2006, 1909.37],

['Military Spending per Capita', 'United States', 2007, 1940.19],

['Military Spending per Capita', 'United States', 2008, 2064.52],

['Military Spending per Capita', 'United States', 2009, 2210.9],

['Military Spending per Capita', 'United States', 2010, 2252.54],

['GDP per Capita', 'China', 2006, 4747.750],

['GDP per Capita', 'China', 2007, 5550.450],

['GDP per Capita', 'China', 2008, 6186.670],

['GDP per Capita', 'China', 2009, 6793.970],

['GDP per Capita', 'China', 2010, 7544.200],

['Military Spending per Capita', 'China', 2006, 57.87],

['Military Spending per Capita', 'China', 2007, 66.4],

['Military Spending per Capita', 'China', 2008, 72.79],

['Military Spending per Capita', 'China', 2009, 87.41],

['Military Spending per Capita', 'China', 2010, 90.25],

['GDP per Capita', 'Russia', 2006, 13321.870],

['GDP per Capita', 'Russia', 2007, 14899.380],

['GDP per Capita', 'Russia', 2008, 16040.350],

['GDP per Capita', 'Russia', 2009, 14830.300],

['GDP per Capita', 'Russia', 2010, 15611.990],

['Military Spending per Capita', 'Russia', 2006, 332.38],

['Military Spending per Capita', 'Russia', 2007, 361.09],

['Military Spending per Capita', 'Russia', 2008, 400.93],

['Military Spending per Capita', 'Russia', 2009, 416.54],

['Military Spending per Capita', 'Russia', 2010, 410.39],

['GDP per Capita', 'United Kingdom', 2006, 33847.670],

['GDP per Capita', 'United Kingdom', 2007, 35537.340],

['GDP per Capita', 'United Kingdom', 2008, 36066.400],

['GDP per Capita', 'United Kingdom', 2009, 34431.840],

['GDP per Capita', 'United Kingdom', 2010, 35059.240],

['Military Spending per Capita', 'United Kingdom', 2006, 891.68],

['Military Spending per Capita', 'United Kingdom', 2007, 913.98],

['Military Spending per Capita', 'United Kingdom', 2008, 948.58],

['Military Spending per Capita', 'United Kingdom', 2009, 960.39],

['Military Spending per Capita', 'United Kingdom', 2010, 933.74],

['GDP per Capita', 'Turkey', 2006, 12116.070],

['GDP per Capita', 'Turkey', 2007, 12891.520],

['GDP per Capita', 'Turkey', 2008, 13107.500],

['GDP per Capita', 'Turkey', 2009, 12460.750],

['GDP per Capita', 'Turkey', 2010, 13577.100],

['Military Spending per Capita', 'Turkey', 2006, 260.86],

['Military Spending per Capita', 'Turkey', 2007, 240.25],

['Military Spending per Capita', 'Turkey', 2008, 240.48],

['Military Spending per Capita', 'Turkey', 2009, 254.7],

['Military Spending per Capita', 'Turkey', 2010, 247.39],

['GDP per Capita', 'Germany', 2006, 32491.510],

['GDP per Capita', 'Germany', 2007, 34603.340],

['GDP per Capita', 'Germany', 2008, 35728.210],

['GDP per Capita', 'Germany', 2009, 34374.940],

['GDP per Capita', 'Germany', 2010, 36081.420],

['Military Spending per Capita', 'Germany', 2006, 520.73],

['Military Spending per Capita', 'Germany', 2007, 521.76],

['Military Spending per Capita', 'Germany', 2008, 537.81],

['Military Spending per Capita', 'Germany', 2009, 559.75],

['Military Spending per Capita', 'Germany', 2010, 552.37],

['GDP per Capita', 'India', 2006, 2441.320],

['GDP per Capita', 'India', 2007, 2724.440],

['GDP per Capita', 'India', 2008, 2916.290],

['GDP per Capita', 'India', 2009, 3103.730],

['GDP per Capita', 'India', 2010, 3408.400],

['Military Spending per Capita', 'India', 2006, 30.16],

['Military Spending per Capita', 'India', 2007, 30.1],

['Military Spending per Capita', 'India', 2008, 33.67],

['Military Spending per Capita', 'India', 2009, 39.1],

['Military Spending per Capita', 'India', 2010, 38.71],

['GDP per Capita', 'Japan', 2006, 31934.65],

['GDP per Capita', 'Japan', 2007, 33634.800],

['GDP per Capita', 'Japan', 2008, 33997.440],

['GDP per Capita', 'Japan', 2009, 32233.030],

['GDP per Capita', 'Japan', 2010, 33884.850],

['Military Spending per Capita', 'Japan', 2006, 427.7],

['Military Spending per Capita', 'Japan', 2007, 421.78],

['Military Spending per Capita', 'Japan', 2008, 416.31],

['Military Spending per Capita', 'Japan', 2009, 426.02],

['Military Spending per Capita', 'Japan', 2010, 428.24],

['GDP per Capita', 'Australia', 2006, 35266.220],

['GDP per Capita', 'Australia', 2007, 37253.630],

['GDP per Capita', 'Australia', 2008, 38222.860],

['GDP per Capita', 'Australia', 2009, 38762.710],

['GDP per Capita', 'Australia', 2010, 39764.560],

['Military Spending per Capita', 'Australia', 2006, 929.39],

['Military Spending per Capita', 'Australia', 2007, 968.4],

['Military Spending per Capita', 'Australia', 2008, 982.05],

['Military Spending per Capita', 'Australia', 2009, 1044.92],

['Military Spending per Capita', 'Australia', 2010, 1044.77],

['GDP per Capita', 'Italy', 2006, 29289.230],

['GDP per Capita', 'Italy', 2007, 30389.780],

['GDP per Capita', 'Italy', 2008, 30401.820],

['GDP per Capita', 'Italy', 2009, 28913.100],

['GDP per Capita', 'Italy', 2010, 29480.150],

['Military Spending per Capita', 'Italy', 2006, 646.46],

['Military Spending per Capita', 'Italy', 2007, 622.87],

['Military Spending per Capita', 'Italy', 2008, 639.91],

['Military Spending per Capita', 'Italy', 2009, 617.65],

['Military Spending per Capita', 'Italy', 2010, 588.86]

]);

// Define a category picker control for the Gender column

var CountryDropdown = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'control1',

'options': {

'filterColumnLabel': 'Country',

'ui': {

'labelStacking': 'vertical',

'allowTyping': false,

'allowMultiple': false

}

});

// Define a category picker control for the Gender column

var YearDropdown= new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'control2',

'options': {

'filterColumnLabel': 'Year',

'ui': {

'labelStacking': 'vertical',

'allowTyping': false,

'allowMultiple': false

}

});

// Define a Pie chart

var pie = new google.visualization.ChartWrapper({

'chartType': 'PieChart',

'containerId': 'chart1',

'options': {

'width': 750,

'height': 750,

'legend': 'none',

'title': 'GDP Per Capita Vs. Military Spending Per Capita',

'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},

'pieSliceText': 'label'

// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)

// from the 'data' DataTable.

'view': {'columns': [0, 3]}

});

// Create a dashboard

new google.visualization.Dashboard(document.getElementById('dashboard')).

// Establish bindings, declaring the both the slider and the category

// picker will drive both charts.

bind(CountryDropdown, pie).

bind(YearDropdown, pie).

// Draw the entire dashboard.

draw(data);

}

google.setOnLoadCallback(drawVisualization);

</script>

</head>

<body>

</div>

</body>

</html>

asgallant

unread,

Sep 19, 2012, 5:52:23 PM9/19/12

to google-visua...@googlegroups.com

It works just fine for me. Open it in Chrome and look in the developer's console (ctrl+shift+j in windows) and look for any errors.

Mike

unread,

Sep 19, 2012, 6:02:56 PM9/19/12

to google-visua...@googlegroups.com

Hmmm that's odd. It works for me now too. Hmmm. Well thanks!

Reply all

Reply to author

Forward

0 new messages