Support dataTableFromCsv

292 views
Skip to first unread message

Raimiui Tam

unread,
Dec 9, 2013, 2:16:13 PM12/9/13
to google-visua...@googlegroups.com
Hi,

In November 26, 2013 release notes I see "Support dataTableFromCsv". Where i can find more info about it?

Sergey Grabkovsky

unread,
Dec 9, 2013, 3:31:50 PM12/9/13
to google-visua...@googlegroups.com
Hi, we will be updating our documentation soon, for now, I can fill you in. The dataTableFromCsv support is built into our Query object. Namely, we expose two new options: 'csvColumns' (which should be an array of column types), and 'csvHasHeader' (which determines whether the first row of the CSV should be interpreted as a header row). The file will be interpreted as CSV if you specify the csvColumns option, so it should be fairly straightforward. One thing to keep in mind is that you can only load CSV files that are on the same domain as your chart.

Good luck!

- Sergey


On Mon, Dec 9, 2013 at 2:16 PM, Raimiui Tam <tamra...@gmail.com> wrote:
Hi,

In November 26, 2013 release notes I see "Support dataTableFromCsv". Where i can find more info about it?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

Raimiui Tam

unread,
Dec 10, 2013, 1:54:21 PM12/10/13
to google-visua...@googlegroups.com
Thank you for answer !

When I  try set "var data = google.visualization.Query.response(csv1, 'csvColumns', 'csvHasHeader');" I get :

Uncaught TypeError: Object function yu(a,b){var c=b||{};this.Fja=ri(c.csvColumns);this.mTa=c.csvColumns;this.XT=!!c.csvHasHeader;this.i4=c.sendMethod||qg;this.BIa=!!c.xhrWithCredentials;if(!ak(zu,this.i4))throw l("Send method not supported: "+this.i4);this.xja=c.makeRequestParams_||{};ru(a)?a=this.DTa(a):qu(a)&&(a=this.ETa(a));var d=a,c=qu(d),d=jn(kn(5,d)),d=ou[bd](d);(c=c&&d)||(d=a,c=ru(d),d=jn(kn(5,d)),d=ou[bd](d),c=c&&d);this.AIa=c;this.zIa=a;this.z3=kfa++;Au[z](this)} has no method 'response'

any ideas?

Thanks!
Raimundas


2013 m. gruodis 9 d., pirmadienis 22:31:50 UTC+2, Sergey rašė:
Hi, we will be updating our documentation soon, for now, I can fill you in. The dataTableFromCsv support is built into our Query object. Namely, we expose two new options: 'csvColumns' (which should be an array of column types), and 'csvHasHeader' (which determines whether the first row of the CSV should be interpreted as a header row). The file will be interpreted as CSV if you specify the csvColumns option, so it should be fairly straightforward. One thing to keep in mind is that you can only load CSV files that are on the same domain as your chart.

Good luck!

- Sergey


On Mon, Dec 9, 2013 at 2:16 PM, Raimiui Tam <tamra...@gmail.com> wrote:
Hi,

In November 26, 2013 release notes I see "Support dataTableFromCsv". Where i can find more info about it?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Sergey Grabkovsky

unread,
Dec 10, 2013, 2:09:27 PM12/10/13
to google-visua...@googlegroups.com
That's not how you're supposed to use the query. You can find more information about it's use here, but I'll try to give you the basics. We don't currently support converting a CSV string into a DataTable, only requesting a CSV file over the network. So it is assumed that you have a URL to your CSV file stored in a variable, call it csvUrl. That means that we would do something like the following:
var queryOptions = {
  csvColumns: ['number', 'number' /* Or whatever the columns in the CSV file are */],
  csvHasHeader: true /* This should be false if your CSV file doesn't have a header */
}

var query = new google.visualization.Query(csvUrl, queryOptions);

query.send(handleQueryResponse);

function handleQueryResponse(response) {

  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  // Draw your chart with the data table here.
}

- Sergey


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

asgallant

unread,
Dec 10, 2013, 2:11:56 PM12/10/13
to google-visua...@googlegroups.com
You are using the query wrong.  First, you need to create a query object:

var query = new google.visualization.Query(url);

then send the query, and pass a callback function to run when the query returns:

query.send(queryResponseHandler);

The response handler will have the query response passed as an argument:

function queryResponseHandler (response) {
    var data = response.getDataTable();
}

To use the CSV options, you need to pass an options object to the query, like this:

var query = new google.visualization.Query(url, {
    csvColumns: [/* array of data types corresponding to the data types of each column in the CSV */],
    csvHasHeader: true/false // true if the first row of the CSV contains the column labels
});

Raimiui Tam

unread,
Dec 13, 2013, 1:18:44 PM12/13/13
to google-visua...@googlegroups.com
Thank you  Sergey and asgallant for answer, it works.

I have another question: how to set date type format in csvColumns: ['date', 'number', 'number'] to "YYYY-MM-DD-JJ-NN".

any ideas?

Thanks!
Raimundas

asgallant

unread,
Dec 13, 2013, 2:42:19 PM12/13/13
to google-visua...@googlegroups.com
You need to format the data after you fetch it, using a DateFormatter:

// format column 0 of DataTable data as "YYYY-MM-DD-JJ-NN"
var dataFormatter = new google.visualization.DateFormat({pattern: 'YYYY-MM-DD-JJ-NN'});
dateFormatter.format(data, 0);

I'm not sure that your format string is a valid ISO date format string (see ISO Date format documentation), but I could be wrong about that.

If the CSV data import works the same way as the JSON data import, your CSV needs to have dates as strings in this format: "Date(year, month, day, hour, minute, second, millisecond)" (where hour, minute, second, and millisecond are optional, and month is zero-indexed [January is 0 not 1]).

Sergey Grabkovsky

unread,
Dec 13, 2013, 2:47:49 PM12/13/13
to google-visua...@googlegroups.com
Unfortunately, we do not support any sort of date parsing, so you have to format your dates in the particular way that we support, which is the same as when it's parsing a serialized DataTable. That format is the same as when you're constructing a new Date object in javascript, without the "new". So your CSV file should look something like:
Some Date,Some Data
"Date(2012,0,1)",2
"Date(2012,0,2)",5
"Date(2012,0,3)",8
"Date(2012,0,4)",1
"Date(2012,0,5)",19

Make sure to put your Dates in quotes, because they contain commas which will screw up the CSV parser.

- Sergey


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

Tribblehunter

unread,
Feb 3, 2014, 11:23:38 AM2/3/14
to google-visua...@googlegroups.com
Hi.

Returning to my project after a few months. using jquery-csv to convert a file selected from the computer into a data table.
Just noticed this update, but it works from a server.

Is it possible to use this from a selected file from the computer? File is saved in excel as a .csv file.

Thanks in advance.

Tribblehunter 

asgallant

unread,
Feb 3, 2014, 12:55:52 PM2/3/14
to google-visua...@googlegroups.com
If memory serves, AJAX will not work with the file:// protocol (and the Query is a wrapper for an AJAX function), so I suspect that it will not work with files located client-side.  I'd give it a try, though - worst case scenario, it doesn't work.
Reply all
Reply to author
Forward
0 new messages