What is the proper way to use google line charts with dates

Question

I see this link to use google chart api for putting multiple line charts together

What is the recommended way to have dates on the bottom line as it seems like each row in the chart has the same level of space so if i have charts where their are dates and values i want the correct spacing to be there between date values (1 day difference should be different than 1 month apart data points).

It seems like of you put dates in the first column it keep every "row" the same distance apart horizontally.

EDIT: I have added my code below

---

function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Target');
        data.addColumn('number', 'Actual');

        data.addRows(9);

        data.setValue(0, 0, new Date(2010, 1, 1));
        data.setValue(0, 1, 215);
        data.setValue(0, 2, 215);

        data.setValue(1, 0, new Date(2010, 2, 1));
        data.setValue(1, 2, 213);

        data.setValue(2, 0, new Date(2010, 2, 4));
        data.setValue(2, 2, 213);

        data.setValue(3, 0, new Date(2010, 2, 8));
        data.setValue(3, 2, 213);


        data.setValue(4, 0, new Date(2010, 3, 1));
        data.setValue(4, 2, 220);

        data.setValue(5, 0, new Date(2010, 4, 1));
        data.setValue(5, 2, 190);

Answer 1

That example uses a string to store the year, so no "smart" spacing will occur. However, the Google DataTable does support Date and DateTime column types, so that should suffice for your needs.

http://code.google.com/apis/visualization/documentation/reference.html#DataTable

Basically, instead of calling

...
data.addColumn('string', 'Year');
...

You would do

...
data.addColumn('date', 'TheDate'); // or datetime, depending on your needs

---

Edit: in that case, you probably need to pad the date values yourself. It looks like the fixed spacing comes from the row index in the DataTable. For instance, you can see that this code generates differently-spaced data points in the chart:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Target');

  data.addRows(9);

  data.setValue(0, 0, new Date(2010, 1, 1));
  data.setValue(0, 1, 213);

  data.setValue(3, 0, new Date(2010, 2, 1));
  data.setValue(3, 1, 213);

  data.setValue(4, 0, new Date(2010, 2, 4));
  data.setValue(4, 1, 213);

  data.setValue(5, 0, new Date(2010, 2, 8));
  data.setValue(5, 1, 213);

  new google.visualization.LineChart(document.getElementById('visualization')).draw(data, null);
}