How to use date on google scatter chart 2
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"} } ); |