google charts

How to use date on google scatter chart 2

This entry was posted in JavaScript and tagged google charts on by

The google visualization api limits you to using numeric values for both the X and Y axis, but there is a trick you can do with the google image chart api to covert the value to a date as below. Use JavaScript’s Date() object for the conversion. It would be nice if we could just specify the column as a string like data.addColumn(‘string’, ‘Date’), but the chart still will not accept the string. It will accept a date object though. The next task is to format the date string, it appears google accounts for with the google.visualization.DateFormat method, but it does not work. In the end, I had to accept the formatting provided by the chart of “15 Nov 2011” as the format for a “datetime” column, which looked better than the format displayed for a “date” column.

    var data = new google.visualization.DataTable();
    data.addColumn('datetime', '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, 2, 1), 12])
    data.addRow([new Date(2011, 3, 1), 18])
    data.addRow([new Date(2011, 4, 1), 17])
    data.addRow([new Date(2011, 5, 1), 19])
    data.addRow([new Date(2011, 6, 1), 25])
    data.addRow([new Date(2011, 7, 1), 18])
    data.addRow([new Date(2011, 8, 1), 24])
    data.addRow([new Date(2011, 9, 1), 28])
    data.addRow([new Date(2011, 10, 1), 27])
    data.addRow([new Date(2011, 11, 1), 34])
 
 
    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById('chart'));
    chart.draw(data, {title: 'Test',
                      width: 600, height: 400,
                      vAxis: {title: "cr"},
                      hAxis: {title: "time"}
                      }
              );