It's working correctly now. Thank you very much for your help!
On Tuesday, 14 August 2012 14:35:18 UTC-7, asgallant wrote:
>
> 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',
>
>
> On Tuesday, August 14, 2012 4:55:17 PM UTC-4, Gary Swanson wrote:
>>
>> 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/-/_rtV0aFyi9cJ.
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.
