The axis is putting values every week at that scale, but since you have
formatted the dates to ignore the day, you don't see the days on the
labels. You can override the API's selection of axis values by setting the
hAxis.viewWindow.min/max and hAxis.ticks options. You will need to either
parse your data for appropriate date values or hard-code the axis values in
advance. As an example, you might set the values like this:
hAxis: {
format: 'yyyy-MM',
// set axis tick marks on the 1st day of each month
ticks: [new Date(2013, 0, 1), new Date(2013, 1, 1), new Date(2013, 2,
1), new Date(2013, 3, 1), new Date(2013, 4, 1), new Date(2013, 5, 1), new
Date(2013, 6, 1), new Date(2013, 7, 1), new Date(2013, 8, 1), new
Date(2013, 9, 1), new Date(2013, 10, 1), new Date(2013, 11, 1), new
Date(2014, 0, 1)],
title: 'Month',
// set the axis to span from Jan 1 2013 to Jan 1 2014
viewWindow: {
min: new Date(2013, 0, 1),
max: new Date(2014, 0, 1)
}
}
On a side note, I would caution against creating date objects from strings
like this:
new Date(Date.parse('05/03/2013'))
as parsing dates from strings produces inconsistent results across browsers
and across geographic boundaries. In this case, should the date
"05/03/2013" be parsed as "May 3 2013" or "March 5 2013"? While you know
which you intended, there is no way to tell the browser how to parse the
date to guarantee the result that you want - your best course of action is
to split the string into year, month, and day parts and manually construct
a Date object from them, eg:
function strToDate (dateStr) {
// assumes "MM/dd/yyyy" pattern
var dateArray = dateStr.split('/');
var year = parseInt(dateArray[2]);
var month = parseInt(dateArray[0]) - 1; // adjust month to javascript's
0-indexed base (ie, January is 0, not 1)
var day = parseInt(dateArray[1]);
return new Date(year, month, day);
}
On Monday, October 14, 2013 5:51:59 AM UTC-4, min ji wrote:
>
> thank you asgallant. actually, i want to put the month in the x axis, not
> the date. i try to hide the day information by using date format. but it
> is still strange. in the x axis, there are many points of the same month (i
> just want one month to show once). here are my code and results.
>
> function drawChart() {
> var dates = [
> [new Date(Date.parse('05/03/2013')),3],
> [new Date(Date.parse('06/03/2013')),6]
>
> ];
> var data = new google.visualization.DataTable();
> data.addColumn('date', 'month');
> data.addColumn('number', 'results');
>
>
> for(var i = 0; i < dates.length; i++) {
> var dt = dates[i];
> var date = new Date(dt[0].getFullYear(), dt[0].getMonth());
>
> data.addRow([date, i+dt[1]]);
> };
>
> // Format data
> var dateFormat = new google.visualization.DateFormat({pattern:
> 'yyyy-MM'});
> dateFormat.format(data, 0);
>
> // Create and draw the visualization.
> var chart = new
> google.visualization.ScatterChart(document.getElementById('chart_div'));
> var options = {
>
>
> hAxis: {
> title: 'month',
> format: 'yyyy-MM'
> },
> vAxis: {
> title: 'results',
>
> }
> };
> chart.draw(data, options);
> }
> google.setOnLoadCallback(drawChart);
> google.load('visualization', '1', {packages:['corechart']});
>
>
>
>
>
> On Wednesday, October 9, 2013 2:11:29 PM UTC+2, asgallant wrote:
>>
>> Yes, you can use dates. You must enter them as javascript Date objects,
>> though, not as strings.
>>
>> On Wednesday, October 9, 2013 5:34:52 AM UTC-4, min ji wrote:
>>>
>>> hello everybody,
>>> i want to draw a scatter chart. but my data of x axis is date. is there
>>> some ways that i can draw scatter with date?
>>> thank you
>>>
>>
--
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.
