Google Motion Chart Date Format

Question

Im using google motion charts to graph some data from a csv file. The file looks like so

411,(10/4/2014),24,21
371,(10/5/2014),247,239
959,(10/6/2014),266,23
680,(10/7/2014),211,24

But everytime I try to get it to graph the data I get the error "First and second columns must be entity and time.". What format does the date in the file need to be in?

I modified jlee-tessik idea and came up with the below code which successfully converts any dd/mm/yyyy to a date. Thanks

     $.get(csvFile, function(csvString) {
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
   for(i = 1; i < arrayData.length; ++i)
   {
    arrayData[i][1] = new Date (arrayData[i][1].replace(/\//g, ','));
   }
    var data = new google.visualization.arrayToDataTable(arrayData);

why do you dont cant do not use google chart? – Feb 12 '15 at 19:19 — , Feb 12 '15 at 19:19

jlee-tessik · Answer 1 · 2015-02-13T14:41:09.350

0

The first column needs to be a string, and the second needs to be a date, so be sure to initialize your first two columns with the right data types:

data.addColumn('string', 'Field1');
data.addColumn('date', 'Date');

and assuming your first column is the label you wanted:

data.addRows([
    ['411', new Date (2014,10,4), 24, 21],
    ['371', new Date (2014,10,5), 247, 239],
    ['959', new Date (2014,10,6), 266, 23],
    ['680', new Date (2014,10,7), 211, 24]
]);

EDIT: I didn't understand your question at first. jquery-csv doesn't seem to support date parsing with its basic parse, but you can add a custom hook to format your data specifically the way you want. Here with the first row, I'm grabbing column 2, stripping out the parenthesis, and converting it to a date.

var col2date = function(value, state) {
    if(state.colNum == 2) {
        return new Date (value.replace(/[{()} ]/g, ''));
    }
    return value;
}

var dataRows = $.csv.toArrays("411,(10/4/2014),24,21", { onParseValue: col2date });

edited Feb 13 '15 at 14:41

answered Feb 12 '15 at 19:17

jlee-tessik

1,510
12
16

That wont work because that "new Date (dd/mm/yyyy)" is hard coded, mine is coming in from a csv file where the new Date command is not recongnized – Eric Dunham Feb 12 '15 at 19:52
Then you'll probably need to convert your csv coming in, see jquery-csv library and http://stackoverflow.com/questions/14211636/how-to-use-google-chart-with-data-from-a-csv. – jlee-tessik Feb 12 '15 at 20:04
I already am using jquery-csv to read the file, but google charts doesnt recognize dates with days and months coming in from a file – Eric Dunham Feb 12 '15 at 21:17
Please look at my edit above to see how jquery-csv can be used to parse your data. – jlee-tessik Feb 13 '15 at 07:44

Google Motion Chart Date Format

1 Answers1