Easy Data Visualization with Google Charts and a CSV

Static figures work fine for a print publication. However, when you want to present your research or collected data online, static is stale and dynamic is alive. Today we’re going to take a CSV and create a simple, but interactive, scatter plot. This tutorial assumes some basic familiarity with HTML and JavaScript. If you don’t currently possess these skills, head on over to Codecademy and follow the Web Fundamentals track and the JavaScript track.

Setting Up

To begin, we need to make sure we have the CSV we want to load and the JavaScript library jquery-csv in the same folder as our HTML.

Preview and Data

Here’s the end result of this tutorial: Finished Chart The data I’ll be using is from the three wave KwaZulu-Natal Income Dynamics Study (KIDS). In this example I will be using the first round of the survey (1993). Children are household members listed as younger than 16 and pensioners are defined as males over 65 and females over 60. I use an adult equivalent measure of household income used by Carter and May (1999) and many others in the South African context. The cleaned CSV can be downloaded here. I recommend you download this CSV to work along with this tutorial, but feel free to use your own (just be careful to make the relavent changes to the example code). Add the CSV to the same folder as the HTML we will be creating.

jQuery-CSV

The jQuery-CSV library allows us to easily take a string of CSV data and transform it into the appropriate format for Google’s visualization library. Download either jquery.csv-0.71.js or jquery.csv-0.71.min.js from that page and add it to the folder where your HTML will go.

Accessing the CSV

To begin with, create the HTML document, load the Google JS API, jQuery, and the jQuery library, and display the contents of the CSV to confirm the CSV is where it’s supposed to be and that we can access all the JavaScript we need:

 <!DOCTYPE html> <html> <head> <title>Google Chart Example</title> <script src="https://www.google.com/jsapi"></script> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="jquery.csv-0.71.js"></script> <script> // wait till the DOM is loaded $(function() { // grab the CSV $.get("kzn1993.csv", function(csvString) { // display the contents of the CSV $("#chart").html(csvString); }); }); </script> </head> <body> <div id="chart"> </div> </body> </html> 

Load your newly created HTML to confirm your code outputs the contents of the CSV.

A Simple Scatter Plot

Clear the script tag we used to display the CSV; in this section we will focus on the JavaScript necessary to create a scatter plot with our CSV. Start by loading the visualization library and setting a callback function:

 // load the visualization library from Google and set a listener google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); 

Next, we need to create the callback function we referenced in the previous step. We’ll begin by grabbing the CSV as we did previously:

 function drawChart() { // grab the CSV $.get("kzn1993.csv", function(csvString) { 

We need to transform the CSV into a format suitable for Google’s visualization library:

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

Next, we’ll transform this array into a DataTable object:

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

Since we have more columns of data than are needed for our visualization, let’s create a view on this table of just the first two columns:

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

Now let’s set some basic options for our chart:

 var options = { title: "KwaZulu-Natal Household Survey (1993)", 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: 'none' }; 

Now we need to bind a chart to our <div> and tell the chart to draw the current view with the options we selected:

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

All that’s left for this stage is to close our function blocks:

 }); } 

If you load our current progress you should see the following (relatively meaningless) chart: Basic Chart

Adding Interaction

This chart already features interactivity in the form of rollover states for the plotted points. What we really need is to be able to change the variables we are plotting on the fly. Add the following tags after the </div> tag. I place the range first so that it lines up with the y-axis title:

 <select id="range"> </select> <select id="domain"> </select> <button type="button">Update Chart</button> 

Now we need to update our script to first load the <select> tags with the CSV headers, and also to respond to a click on our button.

Adding <options> to the <select> elements

Immediately following the assignment of arrayData, add the CSV headers to the <select> element:

 // 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("<option value='" + i + "'>" + arrayData[0][i] + "</option"); } 

Make sure the <select> elements show the starting options:

 // set the default selection $("#domain option[value='0']").attr("selected","selected"); $("#range option[value='1']").attr("selected","selected"); 

Updating the Chart

Now we need to assign a function to the button we created. Add the following after chart.draw(view, options);:

 // set listener for the update button $("button").click(function(){ 

Assign the selected column indices to local variables:

 // determine selected domain and range var domain = +$("#domain option:selected").val(); var range = +$("#range option:selected").val(); 

Update the view to reflect the selected columns:

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

Update the axis titles and the axis ranges:

 // 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 and close the function block:

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

Cool! Now we can do more interesting comparisons like plotting cm_16_exp and mean_educ. Here’s what our current chart looks like: Interactive Chart

Even Better UX

UX = User experience. User experience design is an important consideration. We want visitors to our site/blog to enjoy exploring our data. To make our chart more enjoyable, let’s remove the annoying step of having to click the button to update. Simply change this:

 $("button").click(function(){ 

to this:

 $("select").change(function(){ 

and remove the <button> tag. Now your chart should look like this (view the source and compare to yours if your chart is not working).

Conclusion

I hope you enjoyed this tutorial, and especially the end project. Now, to use your own CSV, all you need to do is change the file string “kzn1993.csv” to the name of your CSV and change the title in the chart options. In the next tutorial, we’ll use the Google visualization library to make a bubble chart. (Check out the third tutorial in this series: Google Charts and CSV Part 3: Side-by-Side Bubble Charts)As always, place any questions or comments in the section below. Thanks!

Comments

  1. 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

      • 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)!!!!

      • test

           
               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);
                       });
                   });
               }
        
           

        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

          $.get("testsss.csv", function(csvString1) {
            // function code here
          }

          to your first drawChart() function and remove the second drawChart() function, your code should work. Hope that helps!

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

  3. 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!

  4. 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!

  5. 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/examples/google_chart.html, 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.

  6. 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!

  7. 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.

  8. Tim Cleymans says:

    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 😀
        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?

  9. 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);

  10. Suresh Pendap says:

    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);
    });
    });

  11. thank you so much

  12. 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’.×

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

  14. 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='0']").attr("selected","selected");
    $("#range option[value='1']").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: 'none'
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
    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

  15. 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” }
    ]}

  16. Dimitris says:

    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??

  17. 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?

  18. 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

  19. 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.

  20. 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.

Leave a Reply