Databases
StackOverflow2013
Postsdbo
POGoogle Charts: passing dates without using Date()?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Charts: passing dates without using Date()?
    text
    copied!<p><strong>Summary</strong></p> <p>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 <code>Date</code> objects, i.e. <code>new Date(2005, 3, 13)</code>. Is there any way I can pass it as a Unix timestamp or perhaps a string instead?</p> <p><strong>More Details</strong></p> <p>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 <code>json_encode()</code>, per <a href="http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html#javascriptliteral">the Google data docs</a>:</p> <pre><code>$graph_data = array( 'cols' =&gt; array( array( 'id' =&gt; 'date', 'label' =&gt; 'Date', 'type' =&gt; 'datetime', ), array( 'id' =&gt; 'odometer', 'label' =&gt; 'Miles', 'type' =&gt; 'number', ), ), 'rows' =&gt; array( array( 'c' =&gt; array( array( 'v' =&gt; 1331479502 ), array( 'v' =&gt; 56872 ), ), ), array( 'c' =&gt; array( array( 'v' =&gt; 1331375984 ), array( 'v' =&gt; 55324 ), ), ), array( 'c' =&gt; array( array( 'v' =&gt; 1328966460 ), array( 'v' =&gt; 54244 ), ), ), ), ); </code></pre> <p><code>{"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}]}]}</code></p> <p>So I have the JSON creation down but the API wants dates passed as a <code>Date</code> object and not a number (or string). It throws an error right now but if I change it from <code>datetime</code> to <code>number</code>, it graphs perfectly so I know my JSON format is correct.</p> <p>Is there anything I can do to have the API accept Unix timestamps, or perhaps a string of some sort?</p> <p>As I typed this out, I realized that perhaps I could use some Javascript to walk the JSON object and replace the timestamps with <code>Date</code> objects, but it'd be nice if I didn't have to do any data manipulation via Javascript.</p> <p><strong>EDIT</strong></p> <p>I got part of the way there by setting the <code>type</code> to <code>number</code> and passing dates like this:</p> <pre><code> array( 'c' =&gt; array( array( 'v' =&gt; 1331479502, 'f' =&gt; 'March 11th, 2012' ), array( 'v' =&gt; 56872 ), ), ), </code></pre> <p>That makes the <code>f</code> value show up in the tooltip (yay!) but the <code>v</code> value is still used for the axis labels. Hmm.</p> <p><strong>EDIT #2</strong></p> <p>Looks like there might be some potential in using <a href="http://code.google.com/apis/chart/interactive/docs/customizing_axes.html#Help">DataView</a> to transform a <code>number</code> timestamp into a date but I haven't figured it out yet.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload