control number of labels on x-axis

[Hemant Shah]

Hi Team,

Can you please help me on this?
I am using following code to render chart, on x-axis it is displaying
"DATES" like 8/14/2011 etc...
and it displays around 11 dates as label on x-axis.

Is it possible to control the number of label's on x-axis, i want to
display only 4 labels?


<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Visits');
data.addRows(31);data.setValue(0, 0,
'8/14/2011');data.setValue(0, 1, 707);data.setValue(1, 0,
'8/15/2011');data.setValue(1, 1, 601);data.setValue(2, 0,
'8/16/2011');data.setValue(2, 1, 156);data.setValue(3, 0,
'8/17/2011');data.setValue(3, 1, 187);data.setValue(4, 0,
'8/18/2011');data.setValue(4, 1, 740);data.setValue(5, 0,
'8/19/2011');data.setValue(5, 1, 847);data.setValue(6, 0,
'8/20/2011');data.setValue(6, 1, 826);data.setValue(7, 0,
'8/21/2011');data.setValue(7, 1, 828);data.setValue(8, 0,
'8/22/2011');data.setValue(8, 1, 670);data.setValue(9, 0,
'8/23/2011');data.setValue(9, 1, 169);data.setValue(10, 0,
'8/24/2011');data.setValue(10, 1, 240);data.setValue(11, 0,
'8/25/2011');data.setValue(11, 1, 812);data.setValue(12, 0,
'8/26/2011');data.setValue(12, 1, 343);data.setValue(13, 0,
'8/27/2011');data.setValue(13, 1, 225);data.setValue(14, 0,
'8/28/2011');data.setValue(14, 1, 779);data.setValue(15, 0,
'8/29/2011');data.setValue(15, 1, 1273);data.setValue(16, 0,
'8/30/2011');data.setValue(16, 1, 997);data.setValue(17, 0,
'8/31/2011');data.setValue(17, 1, 800);data.setValue(18, 0,
'9/1/2011');data.setValue(18, 1, 613);data.setValue(19, 0,
'9/2/2011');data.setValue(19, 1, 175);data.setValue(20, 0,
'9/3/2011');data.setValue(20, 1, 224);data.setValue(21, 0,
'9/4/2011');data.setValue(21, 1, 816);data.setValue(22, 0,
'9/5/2011');data.setValue(22, 1, 741);data.setValue(23, 0,
'9/6/2011');data.setValue(23, 1, 832);data.setValue(24, 0,
'9/7/2011');data.setValue(24, 1, 1548);data.setValue(25, 0,
'9/8/2011');data.setValue(25, 1, 800);data.setValue(26, 0,
'9/9/2011');data.setValue(26, 1, 216);data.setValue(27, 0,
'9/10/2011');data.setValue(27, 1, 178);data.setValue(28, 0,
'9/11/2011');data.setValue(28, 1, 641);data.setValue(29, 0,
'9/12/2011');data.setValue(29, 1, 803);data.setValue(30, 0,
'9/13/2011');data.setValue(30, 1, 775);

var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, { pointSize:3, width: 600, height: 200,
title: 'Daily visits', hAxis: {slantedText: "false",
maxAlternation:"5"} });
}
</script>

<div class="block">
<div id="chart_div" style="margin-left: 150px">
</div>
</div>

Thanks in advance. :)

[asgallant]

Do you want only 4 labels (with all of the data displayed) or only 4 data points at a time?  If you want only 4 labels, you can play around with the hAxis.showTextEvery (http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options) option to get what you are looking for.