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.
