Thank you very much asgallant! Your response solved my issue, and thanks
for pointing out the other issue as well (JS Date). I was able to fix both
the things, thanks again!
On Tuesday, October 15, 2013 11:58:47 PM UTC-4, asgallant wrote:
>
> If you remove the hAxis.format option, you will see that it is selecting
> hAxis values for January 1, 2000, 2010, 2020, 2030, 2040, 2050, which is
> why they all show up as "Jan 1" when formatted. If you specify dates for
> hAxis.minValue/maxValue, then the chart will use appropriate axis values:
>
> hAxis: {
> gridlines: {
> count: 4 // this is broken for date axes
> },
> format: 'MMM d',
> minValue: new Date(2013, 0, 1),
> maxValue: new Date(2014, 0, 1)
> }
>
> Incidentally, I would recommend against creating Date objects from strings
> like this: new Date('2013-10-15'), as string-to-date conversion is
> inconsistent across browsers and locales. Create your date objects in the
> format: new Date(year, month, day [, hour [, minute [, second [,
> millisecond]]]]) instead to guarantee that they will be correct. Note
> that javascript months are 0-indexed, so January is 0, not 1 (eg, new
> Date(2013, 9, 15) for your example date).
>
> On Tuesday, October 15, 2013 10:37:38 PM UTC-4, Sudhakaran K wrote:
>>
>> Hi,
>> I have put together a simple Google Line chart with dates in x-axis and
>> numbers in y-axis. The chart does get generated correctly in all cases. The
>> only exception being that in case I have only 1 data point for the chart,
>> the dates in the x-axis are getting generated wrongly. Whatever the date
>> may be for the 1 data point, the x-axis shows Jan 1 as the date. The date
>> shows correctly when I hover over the point in the chart though. Any help
>> in generating correct dates in the x-axis will be greatly appreciated.
>> Thanks!
>>
>> *Complete Code below:*
>> <html>
>> <head>
>> <title>Title</title>
>> <script type="text/javascript" src="
>> https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization
>> ',
>> 'version':'1','packages':['corechart']}]}"></script>
>> <script type="text/javascript">
>> google.setOnLoadCallback(drawChart);
>> function drawChart() {
>> var dataTable = new google.visualization.DataTable();
>> dataTable.addColumn({type: 'date', id: 'Date', label:
>> 'Date'});
>> dataTable.addColumn({type: 'number', id: 'Rank', label:
>> 'Rank'});
>> dataTable.addRows([
>> [new Date('2013-10-15'), 10]
>> ]);
>> var options = {
>> title: 'Rank Trend',
>> legend: {position: 'bottom', alignment: 'center'},
>> pointSize: 3,
>> hAxis: {gridlines: {count: 4}, format: 'MMM d'},
>> vAxis: {gridlines: {count: 5}}
>> };
>> var chart = new
>> google.visualization.LineChart(document.getElementById('chart_div'));
>> chart.draw(dataTable, options);
>> }
>> </script>
>> </head>
>> <body>
>> <div id="chart_div" style="width: 350px; height: 200px;"></div>
>> </body>
>> </html>
>>
>> Browser used: Chrome v30
>>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
