number of labels on the horizontal axis in Google Chartwrapper - google-visualization

Question

In Google Charts, the 'hAxis': {'gridlines': {'count': 3} } statement seems to work, but when I'm using chartWrapper as part of an interactive plot, it does not. I don't really care about vertical gridlines, but I want to control how many labels are on the X axis. I think labels are usually attached to gridlines - one label per gridline.
I have an example from the Google Charts website, where the only thing I changed was to put try and put in 3 gridlines:
https://jsfiddle.net/emorris/gLcq1h2j/

Answer 1

chart option ticks is only supported by a continuous axis
in the fiddle you shared, the view placed on the chart,
converts the first column from type 'date' to 'string',
which results in a discrete axis
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1, 2, 3, 4]
}
to control how many labels are on the X axis, remove the view
to build the ticks dynamically here, use the state of the range filter,
to know the date range currently displayed on the chart
the chart will need to be redrawn when the control's 'statechange' event fires
see following working snippet, an axis label is created for every 5 days...
google.charts.load('current', {
callback: drawChartRangeFilter,
packages: ['corechart', 'controls']
});
function drawChartRangeFilter() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock low');
data.addColumn('number', 'Stock open');
data.addColumn('number', 'Stock close');
data.addColumn('number', 'Stock high');
var open, close = 300;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
change = change >= 0 ? change + 10 : change - 10;
open = close;
close = Math.max(50, open + change);
low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
low = Math.max(0, low);
high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
var date = new Date(2012, 0, day);
data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]);
}
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'LineChart',
chartOptions: {
chartArea: {
width: '92%'
},
hAxis: {
baselineColor: 'none'
},
height: 72
},
chartView: {
columns: [0, 3]
},
minRangeSize: 86400000
}
},
state: {
range: {
start: new Date(2012, 1, 9),
end: new Date(2012, 2, 20)
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'chart',
options: {
chartArea: {
height: '100%',
width: '100%',
top: 12,
left: 48,
bottom: 48,
right: 48
},
vAxis: {
viewWindow: {
min: 0,
max: 2000
}
},
legend: {
position: 'none'
}
}
});
google.visualization.events.addListener(control, 'statechange', setAxisTicks);
function setAxisTicks() {
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = control.getState().range;
var ticksAxisH = [];
for (var i = dateRange.start.getTime(); i <= dateRange.end.getTime(); i = i + (oneDay * 5)) {
ticksAxisH.push(new Date(i));
}
if (ticksAxisH.length > 0) {
ticksAxisH.push(new Date(ticksAxisH[ticksAxisH.length - 1].getTime() + (oneDay * 5)));
}
chart.setOption('hAxis.ticks', ticksAxisH);
if (chart.getDataTable() !== null) {
chart.draw();
}
}
setAxisTicks();
dashboard.bind(control, chart);
drawDashboard();
$(window).resize(drawDashboard);
function drawDashboard() {
dashboard.draw(data);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>