How to use dates in X-axis with Google chart API?

UPDATE This is now supported directly in the Chart API using the advanced graphs "annotated chart" feature - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

I have done this on my ReHash Database Statistics chart (even though the dates turned out to be evenly spaced, so it doesn't exactly demonstrate that it's doing this).

First, you want to get your overall time period, which will be analogous to the overall width of your chart. To do this we subtract the earliest date from the latest. I prefer to use Unix-epoch timestamps as they are integers and easy to compare in this way, but you could easily calculate the number of seconds, etc.

Now, loop through your data. For each date we want the percentile in the overall period that the date is from the beginning (i.e. the earliest date is 0, the latest is 100). For each date, you first want to calculate the distance of the present date from the earliest date in the data set. Essentially, "how far are we from the start". So, subtract the earliest date from the present date. Then, to find the percentile, we divide the distance of the present date by the overall time period, and then multiply by 100 and truncate or round any decimal to give our integral x-coordinate.

And it is as simple as that! Your x-values will range from 0 (the left-side of the chart) to 100 (the right side) and each data point will lie at a distance from the start respective of its true temporal distance.

If you have any questions, feel free to ask! I can post pesudocode or PHP if desired.

I had the same problem, found scatter plots on Google Charts, it does exactly what is necessary.

Here's the code I ended up with (took theirs as a starting point):

function drawVisualization() {    // Create and populate the data table.    var data = new google.visualization.DataTable();    data.addColumn('date', 'Date');    data.addColumn('number', 'Quantity');    data.addRow([new Date(2011, 0, 1), 10])    data.addRow([new Date(2011, 1, 1), 15])    data.addRow([new Date(2011, 3, 1), 40])    data.addRow([new Date(2011, 6, 1), 50])    // Create and draw the visualization.    var chart = new google.visualization.ScatterChart(        document.getElementById('visualization'));    chart.draw(data, {title: 'Test',                      width: 600, height: 400,                      vAxis: {title: "cr", titleTextStyle: {color: "green"}},                      hAxis: {title: "time", titleTextStyle: {color: "green"}},                      lineWidth: 1}              );}

Note that they seem to count months from 0, i.e. January is 0, February is 1, ..., December is 11.

It looks like you can now do this with advanced graphs:

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html