Re: Linechart X axis scale when using Dates

asgallant

unread,

Aug 14, 2012, 4:09:22 PM8/14/12

to google-visua...@googlegroups.com, gasw...@shaw.ca

You are creating your date objects wrong. The format for creating a Date object is new Date(year, month, day, hour, minute, second, millisecond) where months are zero-indexed (ie, January is 0 not 1). So the first row in your dataTable should be:

[new Date(2012, 3, 18, 22), 0.80, 0.75, 0.88],

Follow that format and your chart should draw correctly.

On Tuesday, August 14, 2012 3:28:27 PM UTC-4, Gary Swanson wrote:

Hi everyone,
This is the first time using a google linechart in a project. I have a chart that displays river levels for three rivers. Data is continuously collected every hour. I need to display chart using dates and times on the X axis.
I got a chart working in the visualization playground but the problem is the scaling of the X axis. The X axis starts at Jan 1 1970, so my data appears as a line on the right hand side of the graph. Is there a way to get the scale to be the dates in the data set?
Users are able to select their own date range, and which rivers they want to see.
The code is below
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('datetime', 'Date');
dataTable.addColumn('number', 'Alouette');
dataTable.addColumn('number', 'Baynes');
dataTable.addColumn('number', 'Fenton');
dataTable.addRows([
[ new Date('Apr 18 2012 22:00') , 0.80 , 0.75 , 0.88 ],
[ new Date('Apr 19 2012 00:00') , 0.80 , 0.75 , 0.88 ],
[new Date('Apr 19 2012 01:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 02:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 03:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 04:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 05:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 06:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 07:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 08:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 09:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 10:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 11:00') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 12:00)') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 13:00)') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 14:00)') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 15:00)') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 15:00)') , 0.80 , 0.75 , 0.88 ] ,
[ new Date('Apr 19 2012 16:00)') , 0.80 , 0.75 , 0.88 ] ,
[new Date('Apr 19 2012 17:00'), 0.80, 0.75, 0.88],
[new Date('Apr 19 2012 18:00'), 0.80, 0.75, 0.88],
[new Date('Apr 19 2012 19:00'), 0.80, 0.75, 0.88],
[new Date('Apr 19 2012 20:00'), 0.80, 0.75, 0.88],
[new Date('Apr 19 2012 21:00'), 0.80, 0.75, 0.88],
[new Date('Apr 19 2012 22:00'), 0.80, 0.75, 0.88],
[new Date('Apr 19 2012 23:00'), 0.80, 0.75, 0.88],
[new Date('Apr 20 2012 00:00'), 0.72, 0.84, 0.70],
[new Date('Apr 20 2012 01:00'), 0.94, 1.15, 0.70],
[new Date('Apr 20 2012 02:00'), 1.07, 1.34, 0.93],
[new Date('Apr 20 2012 03:00'), 1.15, 1.35, 1.01],
[new Date('Apr 20 2012 04:00'), 1.06, 1.14, 1.01],
[new Date('Apr 20 2012 05:00'), 0.92, 0.94, 0.93],
[ new Date('Apr 20 2012 06:00') , 0.78 , 0.78 , 0.83 ] ,
[ new Date('Apr 20 2012 07:00') , 0.73 , 0.65 , 0.82 ] ,
[ new Date('Apr 20 2012 08:00') , 0.68 , 0.60 , 0.77 ] ,
[ new Date('Apr 20 2012 09:00') , 0.67 , 0.64 , 0.72 ] ,
[ new Date('Apr 20 2012 10:00') , 0.77 , 0.80 , 0.72 ] ,
[ new Date('Apr 20 2012 11:00') , 0.94 , 1.03 , 0.80 ] ,
[ new Date('Apr 20 2012 12:00') , 1.11 , 1.27 , 0.91 ]
]);

var formatter_short = new google.visualization.DateFormat({formatType: 'short' });
formatter_short.format(dataTable, 0);
var dataView = new google.visualization.DataView(dataTable);

var options = { title: 'River Levels in meters'};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(dataView,
{curveType: "function",
series: [{lineWidth: 1},
{lineWidth: 1},
{lineWidth: 1}
],
colors: ['#40D1F9','#F92525','#25B70E'],
fontName: 'Tahoma',
hAxis: {slantedText: true},
hAxis: {slantedTextAngle: 90},
hAxis: {format:'MM d, y'},
hAxis: {viewWindowMode:'pretty'},
legend: {position: 'top'},
chartArea: {width: 535, height: 300},
vAxis: {title: 'Depth of River in Meters',
titleTextStyle: {italic: false}}
}
);
}

google.setOnLoadCallback(drawVisualization);
</script>
Any help is much appreciated.
Thanks,
Gary

Gary Swanson

unread,

Aug 14, 2012, 4:55:17 PM8/14/12

to google-visua...@googlegroups.com, gasw...@shaw.ca

Thank you that was the issue. I have another issue now though, the X axis labels are only displaying the time, not the Date and Time.

asgallant

unread,

Aug 14, 2012, 5:35:18 PM8/14/12

to google-visua...@googlegroups.com, gasw...@shaw.ca

The axis formatting is controlled by hAxis.format. Your hAxis option isn't input correctly, though - it needs to be like this:

hAxis: {
slantedText: true,
slantedTextAngle: 90,

format:'MM d, y',

viewWindowMode:'pretty'

}

The format you chose also doesn't have any time parameters, you might want something like:

format:'HH:mm MM d, y',

Gary Swanson

unread,

Aug 14, 2012, 7:42:28 PM8/14/12

to google-visua...@googlegroups.com, gasw...@shaw.ca

It's working correctly now. Thank you very much for your help!

Reply all

Reply to author

Forward