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/-/JeeaDIvi6WkJ.
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.
