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.
On Tuesday, 14 August 2012 13:09:22 UTC-7, asgallant wrote:
>
> 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
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/qcjnUsltZRwJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
