How To Create A Stacked Bar Chart For Three Sets Of Data?
I'm using Google Charts to visualize some metrics and I've ran into a bit of a snag. Right now I have a bar graph that looks like this (code below) and the code behind it is Javas
Solution 1:
to have 2 bars with only 1 segment and then a 3rd bar with 5 or so...
use the series
option on the first two series to isolate each bar
use the hAxes
option to hide the additional axis' labels
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
['Chicago', 400, 500, 200, 200, 200, 200, 200],
['New York', 400, 500, 200, 200, 200, 200, 200],
['Seattle', 400, 500, 200, 200, 200, 200, 200],
['Average', 400, 500, 200, 200, 200, 200, 200]
]);
var options = {
hAxes: {
1: {
textStyle: {
color: 'transparent'
}
},
2: {
textStyle: {
color: 'transparent'
}
}
},
bars: 'horizontal',
colors: ['#1b9e77', '#d95f02', '#7570b3'],
hAxis: {
format: 'decimal'
},
height: 400,
isStacked: true,
series: {
0: {
targetAxisIndex: 1
},
1: {
targetAxisIndex: 2
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
},
packages: ['bar']
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>
EDIT
using a core chart is another option, the following config option will get the chart close to the look & feel of material
theme: 'material'
however, core charts don't group the same as material
so have to create the groups manually, within the data, including rows for spacing
nor will it adjust the last color automatically
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
[' ', 400, null, null, null, null, null, null],
['Chicago', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
[' ', null, null, null, null, null, null, null],
[' ', 400, null, null, null, null, null, null],
['New York', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
[' ', null, null, null, null, null, null, null],
[' ', 400, null, null, null, null, null, null],
['Seattle', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
[' ', null, null, null, null, null, null, null],
[' ', 400, null, null, null, null, null, null],
['Average', null, 500, null, null, null, null, null],
[' ', null, null, 200, 200, 200, 200, 200],
]);
var options = {
colors: ['#1b9e77', '#d95f02', '#4a148c', '#7b1fa2', '#9c27b0', '#ba68c8', '#e1bee7'],
bar: {
groupWidth: '90%'
},
hAxis: {
format: 'decimal'
},
height: 400,
isStacked: true,
theme: 'material'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>
Post a Comment for "How To Create A Stacked Bar Chart For Three Sets Of Data?"