I have seen many column and bar charts which are grouped and I have started using Google Graphs for the first time.
I have created a chart showing 2 years data and I need to group the Jan 2018/Jan 2019 beside each other and then a gap and likewise, with the Feb 18/Feb 19 stuck together as column charts - is this possible?
I have created a JSFiddle for this if you want to take a look and see if my logic is correct.
I am using the following format for the data...
var monthdata = google.visualization.arrayToDataTable([
['Month', 'Money Received', 'Money Outstanding', 'Still to be invoiced', 'Ahead of Budget Achieved'],
['January 2019', 9145.600, 1000.400, 0, 900.4],
['January 2018', 8123.100, 0, 0, 0],
['February 2019', 7030.700, 200.300, 999.75, 0],
['February 2018', 7311.190, 0, 0, 0]])
etc... (full code in the JSFilddle section)
many thanks in advance.
there aren't any group options available out of the box.
in order to create a gap between the month pairs,
you could add blank rows to the data table,
in between each pair, e.g.
['January 2019', 9145.600, 1000.400, 0, 900.4],
['January 2018', 8123.100, 0, 0, 0],
[null, null, null, null, null],
['February 2019', 7030.700, 200.300, 999.75, 0],
['February 2018', 7311.190, 0, 0, 0],
[null, null, null, null, null],
['March 2019', 8784.600, 1000.000, 0, 0],
['March 2018', 9945.200, 0, 0, 0],
to bring the month pairs closer together,
you can use the bar.groupWidth option...
bar: {
groupWidth: '90%'
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var monthdata = google.visualization.arrayToDataTable([
['Month', 'Money Received', 'Money Outstanding', 'Still to be invoiced', 'Ahead of Budget Achieved'],
['January 2019', 9145.600, 1000.400, 0, 900.4],
['January 2018', 8123.100, 0, 0, 0],
[null, null, null, null, null],
['February 2019', 7030.700, 200.300, 999.75, 0],
['February 2018', 7311.190, 0, 0, 0],
[null, null, null, null, null],
['March 2019', 8784.600, 1000.000, 0, 0],
['March 2018', 9945.200, 0, 0, 0],
[null, null, null, null, null],
['April 2019', 11398.300, 1019.8300, 0, 1139.83],
['April 2018', 9878.500, 0, 0, 0],
[null, null, null, null, null],
['May 2019', 8486.800, 524.670, 1586.44, 0],
['May 2018', 12050.300, 0, 0, 0],
[null, null, null, null, null],
['June 2019', 10186.0100, 1000.4000, 423.3, 0],
['June 2018', 10321.120, 0, 0, 0],
[null, null, null, null, null],
['July 2019', 11287.2200, 1823.8800, 0, 1212.99],
['July 2018', 11555.000, 0, 0, 0],
[null, null, null, null, null],
['August 2019', 8491.1600, 892.1200, 2197.88, 0],
['August 2018', 11288.120, 0, 0, 0],
[null, null, null, null, null],
['September 2019', 6496.3300, 4221.3200, 0, 132.44],
['September 2018', 13892.500, 0, 0, 0],
[null, null, null, null, null],
['October 2019', 4905.5300, 2121.1200, 1878.88, 0],
['October 2018', 8723.100, 0, 0, 0],
[null, null, null, null, null],
['November 2019', 3296.7000, 1834.1200, 3165.88, 0],
['November 2018', 7011.700, 0, 0, 0],
[null, null, null, null, null],
['December 2019', 5110.1000, 1200.3600, 0, 1310.46],
['December 2018', 9382.500, 0, 0, 0]
]);
var options = {
bar: {
groupWidth: '90%'
},
title: 'Invoicing and Revenue',
isStacked: 'true',
legend: {
position: 'top',
alignment: 'start'
},
tooltip: {
isHtml: true
},
hAxis: {
titleTextStyle: {
color: '#78909c'
},
hAxis: {
title: 'Date'
},
slantedText: true,
slantedTextAngle: 70,
gridlines: {
count: 24
},
},
vAxis: {
minValue: 0,
gridlines: {
color: '#cfd8dc',
count: 4
},
vAxis: {
title: '€'
},
title: '€',
titleTextStyle: {
color: '#78909c'
},
baselineColor: 'transparent',
textStyle: {
color: '#1a71a8',
fontName: 'Roboto',
fontSize: '9',
bold: true
}
},
colors: ["#1a71a8", "#7b848e", "#c65217", "#73721c"],
backgroundColor: '#ffffff',
chartArea: {
backgroundColor: "#ffffff",
width: '88%',
height: '68%'
},
animation: {
duration: 1200,
easing: 'linear',
startup: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('containerx'));
chart.draw(monthdata, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="containerx"></div>