Hello Jonathan,

Your tutorial is simple and awesome. I just love this master piece. I am trying to build a dynamic chart and have been looking for such tutorials for past two months and this is so cool. Thank You for this tutorial.

Hi Jonathan,
Nice guide. I was looking for a way to feed a csv file to obtain a Google Organizational Chart. Does your code apply to Orgchart type of charts or do I need to modify it? If so How do I do that?
Hope you can help.

Hello nice guide,
Im left a little confussed.
I followed step by step and it works as expected using your csv file. However when using my own a blank page is presented.
I read your replies to other comments 'cannot be client-side' im confussed, how come i can create the chart using your file but not my own? I am using client-side but how come I can create the chart fine using your csv if you cant use clinet-side? or maybe im just very confussed

Hi
Am trying to follow the tutorial. Copied your code and did everything you said but it won't access the csv. when opened the tab is blank apart from the title saying "Google Chart Example".
Why won't it read the csv file? everything is in same folder as specified and I'm using your code and your downloaded csv file. any ideas?

In an earlier comment, I mentioned that Google does not "allow developers to use the Google Visualization API to create client-side software" (see the following link:
https://developers.google.c....

This means you need to load this file on a server. XAMPP (https://www.apachefriends.o... is a cross-platform solution for setting up a local server. If you're on a Mac, http://anvilformac.com/ has been recommended and looks easy.

Hi Jonathan,

Can you explain a little bit more what this means? For example, am I not allowed to load a .csv file from my Documents directory where I have the .html file saved?

I try to read the csv file that you provide and I can't see anything. I put the js file in the same folder with html file. What can be wrong??

Hello , actually i am new to google charts so please help me in solving this issue.

"I want to plot number of working hours of an employee in a pie chart by reading a json file which is given below , by calculating the number of hours between 'time_from' and 'time_to'.

{"Details":
[
{ "emp_name": "ABC", "works_on": "wheels", "time_from": "2012-03-27 10:00:00", "time_to": "2012-03-27 12:00:00" },
{ "emp_name": "xyz", "works_on": "seat", "time_from": "2012-03-27 14:00:00", "time_to": "2012-03-27 17:00:00" },
{ "emp_name": "ABC", "works_on": "painting", "time_from": "2012-03-28 10:00:00", "time_to": "2012-03-28 12:00:00" },
{ "emp_name": "xyz", "works_on": "tube", "time_from": "2012-03-28 14:00:00", "time_to": "2012-03-28 17:00:00" },
{ "emp_name": "pqr", "works_on": "engine", "time_from": "2012-03-29 10:00:00", "time_to": "2012-03-29 12:00:00" },
{ "emp_name": "ABC", "works_on": "wiper", "time_from": "2012-03-29 14:00:00", "time_to": "2012-03-29 17:00:00" },
{ "emp_name": "mno", "works_on": "air_cooler", "time_from": "2012-03-30 10:00:00", "time_to": "2012-03-30 12:00:00" },
{ "emp_name": "ABC", "works_on": "wheels", "time_from": "2012-03-30 14:00:00", "time_to": "2012-03-30 17:00:00" }
]}

Hello Jonathan,

Your tutorial is simple and awesome. I just love this master piece. I am trying to build a dynamic chart and have been looking for such tutorials for past two months and this is so cool. Thank You for this tutorial.

I am following your steps(I saw your example chart and replicated your source code) and I end up with these errors in Mozilla FireFox as:-
"NetworkError: 500 Internal Server Error - http://us08vlenscript/py/scripts/mycsvfile.csv"

My program is not able to get data from.csv file. You can see that I am not giving a web link for .csv file.

Both my .csv file and script are located in same directory.

I never gave .csv file as web link. This is my code:-

#!/usr/bin/python
import sys, pkg_resources, imp
import pyodbc
import MySQLdb
import gviz_api
import gviz_api
import csv

#Connect to ens-db, database circuits
conn_ensdb = MySQLdb.Connection(db='NHS_db', host='ens-db', user='abxc', passwd='ilkolk')
cursor_ensdb = conn_ensdb.cursor()
cursor_ensdb.execute("SELECT MType,TCount from TotalManaged_DC")
rows = cursor_ensdb.fetchall()

#Converting data from db to python dictionary
my_list = [data for data in rows]
dict_with_strs=dict(my_list)
dict_with_ints=dict((k,int(v)) for k,v in dict_with_strs.iteritems())

#convert python dictionary to csv file
with open('mycsvfile.csv','wb')as f:
w = csv.writer(f)
w.writerows(dict_with_ints.items())

print ""
print '''

// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("/var/www/html/win/pr/mycsvfile.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

// use arrayData to load the select elements with the appropriate options
for (var i = 0; i < arrayData[0].length; i++) {
// this adds the given option to both select elements
$("select").append("" + arrayData[0][i] + "</option");
}
// set the default selection
$("#domain option[value=&#0390&#039]").attr("selected","selected");
$("#range option[value=&#0391&#039]").attr("selected","selected");

// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);

// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);

var options = {
title: "Company Perfomance",
hAxis: {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: &#039none&#039
};

var chart = new google.visualization.ScatterChart(document.getElementById(&#039chart&#039));
chart.draw(view, options);

// set listener for the update button
$("select").change(function(){
// determine selected domain and range
var domain = +$("#domain option:selected").val();
var range = +$("#range option:selected").val();

// update the view
view.setColumns([domain,range]);

// update the options
options.hAxis.title = data.getColumnLabel(domain);
options.hAxis.minValue = data.getColumnRange(domain).min;
options.hAxis.maxValue = data.getColumnRange(domain).max;
options.vAxis.title = data.getColumnLabel(range);
options.vAxis.minValue = data.getColumnRange(range).min;
options.vAxis.maxValue = data.getColumnRange(range).max;

// update the chart
chart.draw(view, options);
});
});
}

'''

This file is in cgi-bin directory so once I runt his program and just give the file path in browser I can see the chart.

Can You give some suggestions to rectify this error?

Thanks,
Maya

Just displays the data as text. I can never find examples using CSV which actually work.

Are you able to see the chart at http://economistry.com/exam... If so, that example works.

The key to getting this visualization to work is testing it on a server. I have had luck in the past with XAMPP (https://www.apachefriends.o..., which I use on my Windows and Linux machines. I currently use the free version of MAMP (http://www.mamp.info/en/) when testing on my Mac.

@Mahdi recommended http://anvilformac.com/ if you're on a Mac. It looks useful, but I haven't tried it myself.

I'm trying to do a calendar graph using csv data, but having trouble defining the date field. What format should the date field be in the csv file. I have tried 'YYYY/MM/DD' and the raw date string, but it errors out with this message - Invalid data table format: column #0 must be of type 'date|datetime'.×

thank you so much

Does it work with client side csv file? I am not able to get it working. The csv file is in the same directory where the html file is.

Google Chart Example

// wait till the DOM is loaded
$(function() {
// grab the CSV
$.get("kzn1993.csv", function(csvString) {
// display the contents of the CSV
$("#chart").html(csvString);
});
});

Having a similar problem, I now use dygraphs
Works extremely well, particularly with very large data sets (100's of thousands of records)

Sorry my last post does not exactly answer the question. I have not tried dygraphs with client side data files. However, it does work very well with very large server side data files...

Sorry for the delay @Suresh.

Google does not "allow developers to use the Google Visualization API to create client-side software" (see the following link:
https://developers.google.com/chart/interactive/faq#creatingaclient)

Hi Jonathan,

Excellent tutorial if not a little complicated right now for me :-) Small steps lol

I have created a Google chart with help from a guy on the google chart forums but I now want to add another chart but I am lost, do you have any tutorials or advice to create a simple chart. My code is below.

John.

March 2014 Chart

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

function drawVisualization() {
// grab the CSV
$.get("CSVFiles/march2014.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);

// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);

var options = {
title : 'March 2014 Helpdesk Tickets',
titleTextStyle: {fontSize: '30', color: 'darkblue', italic: 'true' },
vAxis: {title: "Tickets", titleTextStyle: {color: 'darkblue', italic: 'false', bold: 'true'}},
hAxis: {title: "Day", titleTextStyle: {color: 'darkblue', italic: 'false', bold: 'true'}},
seriesType: "bars",
series: {
2: {type: "line"},
3: {type: "line"},
4: {type: "line"}}
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
}
google.setOnLoadCallback(drawVisualization);

Hi Jonathan,

This is a great tutorial, and I would love to see the same results with my data,
but unfortunately, I can't get any further than your first test (where you just display the csv file in the browser)

I downloaded the jquery.cvs-71.0.js and placed it in the same folder as my html. I also download the knz.csv file. I do everything exactly the same as you, I think, but it doesn't work.

Any idea what I'm doing wrong?

I am having the same problem here, where I cannot display the data in the browser. I have the html code, jquery.csv-0.71.js, and csv file in the same directory. But when I open the html file, no data is read in. I would love to get this up and running so I can better understand how this works. But without even being able to read the data, I am stuck. Any help would be greatly appreciated.
thanks very much!

Hi Jonathan,

Thanks for this tutorial, that is exactly what I want to do.
Unfortunately, I'm having the same issue as Nicole: in the first step, my csv data is not displayed in the browser, and its making me crazy :D
The browser console just gives me a syntax error on line 1 of the csv file, and then another one on line 1 of the html file. In the end, I just tried copy and paste but it is still the same problem.
Also, I tried it on different browsers (chrome, firefox, opera and even ie). Nothing seems to help.
Do you have any suggestions?

Hi Tim, Nicole, and Mo,

Sorry for the delay. The key to getting this visualization to work is testing it on a server. I have had luck in the past with XAMPP (https://www.apachefriends.o..., which I use on my Windows and Linux machines. I currently use the free version of MAMP (http://www.mamp.info/en/) when testing on my Mac.

Regards,

Jon

I would recommend http://anvilformac.com/ if you just want to set up a quick server to see the results.

Hello, great tutorial!
My question is how do you parse csv when delimiter is not standard comma ("," ) something else like for example (";"). I know it's step where we need to transform the CSV into a format suitable for Google's visualization library but everything I try it doesn't workout...Thank you very much.

Hi, I am a novice at javascript and I found your tutorial extremely helpful. However, I would like to be able to plot a time stamped log file where the first field of every record is a Unix time stamp (I can save the date/time in other format if it helps) and the second field is ambient temperature. Here is the beginning of the file as an example:
Date,temperature
1394675338, 58.0
1394675358, 57.8
1394675378, 56.4
1394675398, 59.3
Your example displays the data fine, except that the X axis shows the time stamp instead of actually date/time.
I have tried to convert the first field into a Date() but apparently none of my attempts have worked. Any suggestion would be greatly appreciated!

Hi John,

I had no luck with going through this. I didn't manage the get function to fetch the csv file and populate the html file. My main aim is to generate line graph that will read a csv file, then offer a drop down list of the possible references to display on screen.

eg CSV file:
page1:1,2,3
page2:4,5,6
page3:7,8,9

Selecting page1, will show the line graph for 1,2,3, then selecting page2 will show 4,5,6. Is this possible?

I like your example in http://economistry.com/exam..., so using this presentation are you able to assist me with what I need. It would helpful with the source files if you could provide them. Are you able to help me with this?

Regards,

Raj

@Raj: If you can post the specific errors you receive when loading the csv, I can help you troubleshoot. It is certainly possible to do what you want. You can view the source files for my chart by viewing the source in your browser. In most browsers you should be able to right-click the page and select "View Page Source" or something like that. Good luck.

Awesome tutorial, after reading this I managed to get a CSV-powered Google Visualization graph working in my local XAMPP server in no more than 5 mins!

Hi Jonathan,
Beautiful post and easy to follow step-by-step process.

I am facing a strange issue here. I use brackets editor (www.brackets.io). This example worked beautifully in the live preview of the editor (chrome). However, when I closed everything and opened in firefox, it just shows 2 little drop down boxes at the top left hand corner - with no content. ditto for chrome. When tried with IE, it gave a msg at bottom "IE restricted this page from running scripts or ActiveX control.......allow blocked content". Only after allowing, did it work on IE.

I have checked settings on Firefox and Chrome for scripts (www.enable-javascript.com) and seems fine. Yet, I am unable to see chart on firefox or chrome. But it works fine in chrome with live preview of brackets.

By now it must be evident that I am a moron with web technology. What am I missing here?

@Andy:
If you are using Chrome, right-click on the page and select "Inspect Element" from the context menu. This is one way to pull up the Developer Tools. Choose "Console" from the navigation at the top of the Developer Tools to see if there are any errors with the JavaScript.

If you get a "Failed to load resource..." or "XMLHttpRequest cannot load..." error, this is because I assumed you placed the files on a server (either a localhost solution like XAMPP or a hosting account). I will add a note about this to the blog post. Thanks for the comment! You are not a moron!

This is helpful. Thanks Jonathan. Do you have a sample of how this could work with google's org chart?

Farfromer did you manage to apply the CSV feed to a Google org chart? I am trying to find an answer to this problem but so far no luck ...

Thanks for the suggestion! I haven't done that yet, but I'll put it on my to-do list.

Hi, Great Instruction. I am trying to Display 2 of this control board in the same webpage. The 2nd plot, it seems not refering to the correct data, and the control board does not work on the second one. Do you have any experience on such issue... Shoot me a email, appreciate so much

@Hippo The key is to be careful to create new id's for each element in the <body>, and new objects and references to the new elements in the <script>. I have created an example here. This example duplicates the chart and controls I introduced in the sequel to this tutorial: More Google Charts with a CSV: Bubble Charts

- Cheers

test

[js]
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("afterSTR_phase2_DMA_model.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// use arrayData to load the select elements with the appropriate options
for (var i = 0; i &lt; arrayData[0].length; i++) {
// this adds the given option to both select elements
$(&quot;select&quot;).append(&quot;" + arrayData[0][i] + "&lt;/option&quot;);
}
// set the default selection
$(&quot;#domain option[value=&#039;0&#039;]&quot;).attr(&quot;selected&quot;, &quot;selected&quot;);
$(&quot;#range option[value=&#039;1&#039;]&quot;).attr(&quot;selected&quot;, &quot;selected&quot;);
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);

var options = {
title: &quot;STR EDA Dashboard (V1.13)&quot;,
hAxis: {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: &#039;none&#039;
};
var chart = new google.visualization.LineChart(document.getElementById(&#039;chart&#039;));
chart.draw(view, options);
$(&quot;select&quot;).change(function(){
// determine selected domain and range
var domain = +$(&quot;#domain option:selected&quot;).val();
var range = +$(&quot;#range option:selected&quot;).val();
// update the view
view.setColumns([domain,range]);
options.hAxis.title = data.getColumnLabel(domain);
options.hAxis.minValue = data.getColumnRange(domain).min;
options.hAxis.maxValue = data.getColumnRange(domain).max;
options.vAxis.title = data.getColumnLabel(range);
options.vAxis.minValue = data.getColumnRange(range).min;
options.vAxis.maxValue = data.getColumnRange(range).max;
chart.draw(view, options);
});
});
}

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("testsss.csv", function(csvString1) {
var arrayData1 = $.csv.toArrays(csvString1, { onParseValue: $.csv.hooks.castToScalar });
// use arrayData to load the select elements with the appropriate options
for (var i = 0; i &lt; arrayData1[0].length; i++) {
// this adds the given option to both select elements
$(&quot;select&quot;).append(&quot;" + arrayData1[0][i] + "&lt;/option&quot;);
}
// set the default selection
$(&quot;#domain1 option[value=&#039;0&#039;]&quot;).attr(&quot;selected&quot;, &quot;selected&quot;);
$(&quot;#range1 option[value=&#039;1&#039;]&quot;).attr(&quot;selected&quot;, &quot;selected&quot;);
var data1 = new google.visualization.arrayToDataTable(arrayData1);
var view1 = new google.visualization.DataView(data1);
view1.setColumns([0, 1]);

var options = {
title: &quot;STR EDA Dashboard (V1.13)&quot;,
hAxis: { title: data1.getColumnLabel(0), minValue: data1.getColumnRange(0).min, maxValue: data1.getColumnRange(0).max },
vAxis: { title: data1.getColumnLabel(1), minValue: data1.getColumnRange(1).min, maxValue: data1.getColumnRange(1).max },
legend: &#039;none&#039;
};
var chart1 = new google.visualization.LineChart(document.getElementById(&#039;chart2&#039;));
chart.draw(view1, options);
$(&quot;select&quot;).change(function() {
// determine selected domain and range
var domain1 = +$(&quot;#domain1 option:selected&quot;).val();
var range1 = +$(&quot;#range1 option:selected&quot;).val();
// update the view
view.setColumns([domain1, range1]);
options.hAxis.title = data1.getColumnLabel(domain1);
options.hAxis.minValue = data1.getColumnRange(domain1).min;
options.hAxis.maxValue = data1.getColumnRange(domain1).max;
options.vAxis.title = data1.getColumnLabel(range1);
options.vAxis.minValue = data1.getColumnRange(range1).min;
options.vAxis.maxValue = data1.getColumnRange(range1).max;
chart.draw(view1, options);
});
});
}

[/js]

test
Date: /8/12/2013
Phase2:Internal EDA Review
DataScourse:O:\New_Lilly\DTC_model\Strattera\Phase 2\Data\Model Data

Contributionn By Channel(To be Updated)

Dataset Date Range

@Hippo: I've created an example for the specific use case you are working on here. Take a look at the source of my example. In your example, I think if you move the following section
[js]$.get("testsss.csv", function(csvString1) {
// function code here
}[/js]
to your first drawChart() function and remove the second drawChart() function, your code should work. Hope that helps!

Hi, Jon, thx for the quick reply:

I did made the separate IDs for the different chart. What I was trying to achieve is :

----for example I want the second bubble chart using a different csv file(different data)
what I did for that is:
1.make a copy of change the cvs file name and chart id
2. make corresponding div with different ids in the html

---results: second chart is showing, but even with the different referecing ID name, the data still use the same cvs as the first one, seems second one is not loading.

could you show me a example of referencing different csv files.
Thanks so much......(sry, I am really dum)!!!!