CODEWITHSUNDEEP
javascriptgoogle-visualization
jaynp
jaynp

Reputation: 3325

Google API Column chart jsfiddle example not working

I am trying to get this Google Column Chart example given here to work.

Here's my attempt: http://jsfiddle.net/dwNE4/ (Note: this is giving me some trouble loading)

Here's the contents of the fiddle:

HTML

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

JS

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

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
]);

// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}

google.setOnLoadCallback(drawVisualization);

Upvotes: 0

Views: 2904

Answers (1)

asgallant
asgallant

Reputation: 26330

I couldn't get your fiddle link to load, but the javascript works fine: http://jsfiddle.net/asgallant/7wYP2/

Getting the Visualization API to work on jsfiddle requires a few things:

  1. under the "Frameworks and Extensions" options, change the "onload" dropdown to "no wrap - in head" or "no wrap - in body".
  2. under "Fiddle Options", uncheck "Normalized CSS", as this messes with the font sizes in the charts and screws up the display.
  3. Under "External Resources", add the jsapi script URL, appending "?.js" to the end of it (as jsfiddle won't properly detect it as a javascript link unless it ends in ".js"): http://www.google.com/jsapi?.js

The fiddle link I posted above contains all of these tweaks, so you can use that as the basis for your development/testing/experimentation.

Upvotes: 6

Related Questions