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/-/0f3Jgedz-DMJ.
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.
