Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Charts: passing dates without using Date()?

Summary

I'm trying to make a line graph in Google Charts with dates as the X axis. I have that all sorted but it requires passing dates as Date objects, i.e. new Date(2005, 3, 13). Is there any way I can pass it as a Unix timestamp or perhaps a string instead?

More Details

So I have a bunch of data in PHP that I want to graph. I'm taking the data and arranging it into an array in the format that will produce the correct JSON format when run through json_encode(), per the Google data docs:

$graph_data = array(
    'cols' => array(
        array(
            'id' => 'date',
            'label' => 'Date',
            'type' => 'datetime',
        ),
        array(
            'id' => 'odometer',
            'label' => 'Miles',
            'type' => 'number',
        ),
    ),
    'rows' => array(
        array(
            'c' => array(
                array( 'v' => 1331479502 ),
                array( 'v' => 56872 ),
            ),
        ),
        array(
            'c' => array(
                array( 'v' => 1331375984 ),
                array( 'v' => 55324 ),
            ),
        ),
        array(
            'c' => array(
                array( 'v' => 1328966460 ),
                array( 'v' => 54244 ),
            ),
        ),
    ),
);

{"cols":[{"id":"date","label":"Date","type":"datetime"},{"id":"odometer","label":"Miles","type":"number"}],"rows":[{"c":[{"v":1331479502},{"v":56872}]},{"c":[{"v":1331375984},{"v":55324}]},{"c":[{"v":1328966460},{"v":54244}]}]}

So I have the JSON creation down but the API wants dates passed as a Date object and not a number (or string). It throws an error right now but if I change it from datetime to number, it graphs perfectly so I know my JSON format is correct.

Is there anything I can do to have the API accept Unix timestamps, or perhaps a string of some sort?

As I typed this out, I realized that perhaps I could use some Javascript to walk the JSON object and replace the timestamps with Date objects, but it'd be nice if I didn't have to do any data manipulation via Javascript.

EDIT

I got part of the way there by setting the type to number and passing dates like this:

        array(
            'c' => array(
                array( 'v' => 1331479502, 'f' => 'March 11th, 2012' ),
                array( 'v' => 56872 ),
            ),
        ),

That makes the f value show up in the tooltip (yay!) but the v value is still used for the axis labels. Hmm.

EDIT #2

Looks like there might be some potential in using DataView to transform a number timestamp into a date but I haven't figured it out yet.

like image 276
Viper007Bond Avatar asked Mar 12 '12 09:03

Viper007Bond


People also ask

Is Google charts deprecated?

This article relies excessively on references to primary sources. Please improve this by adding secondary or tertiary sources. The Google Chart API is an interactive Web service (now deprecated) that creates graphical charts from user-supplied data.

Can Google charts be used offline?

NO! Your users' computers must have access to https://www.gstatic.com/charts/loader.js in order to use the interactive features of Google Charts.

How to change Date in google data Studio?

Edit your data source. Locate the compatibility mode date field you want to convert. To the right, click the Type menu, then select Date or Date & Time. Select the desired date type.

How do I create a chart from dates in Excel?

In the chart, right-click the category axis, and then click Format Axis. In the Format Axis pane, select the Axis Options tab. Expand Axis Options, and then under Axis Type, make sure Date axis is selected. Under Units, next to Base, select Days, Months, or Years.


1 Answers

I ended up just walking the JSON array and replacing the timestamps with Date objects. It was easier than I expected it to be:

for ( var i = 0; i < json.rows.length; i++ ) { 
    json.rows[i].c[0].v = new Date( json.rows[i].c[0].v * 1000 );
}
like image 165
Viper007Bond Avatar answered Oct 06 '22 01:10

Viper007Bond