Google Visualization API ColumnChartq
Google Visualization API ColumnChart with no spacing currently being applied
by moshfeu
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div">
</div>
<div id="chart_div">
</div>
JavaScript
google.charts.load('current', {
packages: ['corechart', 'controls', 'charteditor']
}).then(function () {
var data = google.visualization.arrayToDataTable([['Outcomes','Baseline - Acute','Review - Acute','Baseline - Risk','Review - Risk','Baseline - Any','Review - Any'],['2015/16',5794,4096,2323,1785,6073,4281],['2016/17',5692,4140,2178,1785,5909,4323],['2017/18',5680,4131,2479,1946,5989,4396]]);
var width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';
// define bars series colors
var colors = ["#FF9900", "#FF6400", "#FF0000", "#9A0033"];
var lineColors = ['#4422EE', '#0F1657'];
// define filter columns
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'Series #');
columnsTable.addColumn('string', 'Select series: ');
var initState = { selectedValues: [] };
for (var i = 1; i < data.getNumberOfColumns(); i++) {
var colIndex = columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
// assign series type, axis, and color -- store using row properties
switch (data.getColumnLabel(i)) {
case 'Baseline - Acute':
case 'Baseline - Risk':
case 'Baseline - Any':
case 'Review - Acute':
case 'Review - Risk':
case 'Review - Any':
columnsTable.setRowProperty(colIndex, 'type', 'bars');
columnsTable.setRowProperty(colIndex, 'targetAxisIndex', 0);
columnsTable.setRowProperty(colIndex, 'color', colors[colIndex]);
break;
default:
columnsTable.setRowProperty(colIndex, 'type', 'line');
columnsTable.setRowProperty(colIndex, 'targetAxisIndex', 1);
}
}
// define chart
var chart = new...