Hello Jonathan,

Your tutorials are simple and awesome.
I am trying to do the same and my graph is not being displayed. Both my script and csv file are both in same directories. This csv file is a an output of python script. Can you please have a look at it and let me know if there are any changes:-

#!/usr/bin/python
import sys, pkg_resources, imp
import os
import pyodbc
import MySQLdb
import gviz_api
import csv
print ""
print '''

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.get("mycsvfile.csv",function(csvString){
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);

//set options
var options = {
title: 'Company Performance',
is3D:true,
hAxix:{title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis:{title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max },
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(view, options);
});
}

'''

Awesome, a great help for new learner to understand. Thanks a lot for the post. Can I use this code?

@PPMP:
You are welcome to use the code. Any links to this blog are appreciated!

that's awwwwwwwwesome, I think I was stuck on the $("select.chart")—-did not notice to change the selection.
—Just on the side notice:

Have you tried this when different data sources resident in different script element
Especially when you have 10+ data sources and display in the same page.It would make code much cleaning.

easier to identify each element if they are in different , I have not get that to work, just wondering if you have any thought on that.

You could place the callback functions in an external script (just make sure to load the external script before you refer to the callback). Then you could change this:
[js]$.get("kz1993.csv", function(csvString) {
// function code
}[/js]

to this:
[js]$.get("kz1993.csv", kzchart);[/js]

where your external call back function looks like this:
[js]var kzchart = function(csvString) {
// function code
};[/js]

<hr/>
A more flexible solution is to make one external function that returns the desired callbacks. Essentially your call from the internal script would look like this:
[js]$.get("kz1993.csv", chartCallback("2"));[/js]

Your external callback generator would then look like this:
[js]var chartCallback = function(suffix) {
var callback = function(csvString) {
// function code
// make sure to add the suffix to the relevant ids and classes (e.g., "chart", "domain", etc.)
};
return callback;
};[/js]