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 frequency. 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 how can I calculate and display it with Google chart?

Other free solutions similar to Google chart or a free library that can be used with ASP.NET are also welcome.

Answer 1

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.

Answer 2

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.

Answer 3

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

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

Answer 4

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 5

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.