Question

15

How to use Google Chart with data from a csv

rated 0 times [ 19] [ 4] / answers: 1 / hits: 39727 / 12 Years ago, tue, january 8, 2013, 12:00:00

I have a csv file that looks like that:

week,value1,value2

1,2,3

2,7,9

I would like to plot a stacked graph of it using google chart (week being my x (horizontal) values and values1 and values2 being the two set of y's). Unfortunately, I didn't find any easy way to do so. That probably relates to me being a complete noob in js.

Is there any simple way to do that?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neo

Add To Favorites

Follow

Total Points: 117

Total Questions: 100

Total Answers: 95

Location: Albania

Member since Fri, Jan 28, 2022

2 Years ago

answered 12 Years ago brynnleslis · Accepted Answer

The jquery-csv library provides the ability to translate a string of csv into an array to be used by google.visualization.arrayToDataTable() (their example here). To make this work, add jquery.csv.js to your server (in the example below I assume it is in the same folder as your HTML) and link to it in your <head>. The following is a simple script you can add to your <head> to get started. I assume a scatter chart, but this process works for any of the charts here. You will also need a <div> with id=chart for this to work.

// load the visualization library from Google and set a listener

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

google.setOnLoadCallback(drawChart);



// this has to be a global function

function drawChart() {

   // grab the CSV

   $.get(example.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]);



     // set chart options

     var options = {

        title: A Chart from a CSV!,

        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'

     };



     // create the chart object and draw it

     var chart = new google.visualization.ScatterChart(document.getElementById('chart'));

     chart.draw(view, options);

  });

}