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.
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.
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.
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.
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.
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 );
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With