How to use dates in x axis with google chart api

Question

Is there a way to plot a chart with google chart api so that the X-axis values are days in a month?

I have data points that are not provided with the same frecuency. For example: Date - Value 1/1/2009 - 100 1/5/2009 - 150 1/6/2009 - 165 1/13/2009 - 200 1/20/2009 - 350 1/30/2009 - 500

I want to make a chart that will separate each data point with the relative distance based on time during a month. This can be done with Excel, but any ideas of how to calculate it and display it with Google chart?

Other free solutions similar to Google chart or a free library that can be used with asp.net aslo welcomed.

Answer 1

This can be done with Google charts quite easily, but your application must calculate the labels

The chxl chart x label parameter is the one you need. The following example labels a y-axis with numbers in 50 steps, and the bottom with dates

chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009

Answer 2

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 it's true temporal distance.

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

Answer 3

I'm not sure how to post this as a comment rather than an answer but I would love to see some PHP code on this. Thanks in advance.

Answer 4

Exactly what I was looking for! Thanks for asking the question, and thanks very much for the answer!

Answer 5

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

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

Answer 6

Hai. I'm thinking along the same lines as you. I can foresee problems where labels overwrite each other, and can think of only two approaches.

1) figure out how many characters in each date,, depending on format (mon/tue, monday/tuesday, 1 jan/1 feb, 1st january, 29th february, 14/2/2010 ..etc) then calculate how many labels you can fit across your chart width (which might get gnarly, involving char width in pixels (easier for fixed fonts), or just a few trial & errors).

Of course, your labels might might align directly with any data.

2) use multiple X-axis labels and place your dates vertically.