Google - An Example of a Google Stacked Bar Chart
HTML
<script src="https://rawgithub.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="main_div">
<div id="chart_div"></div>
</div>
CSS
#main_div {
height: 400px;
background-color: purple;
}
JavaScript
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Jan', 'Feb', 'Mar', 'Apr',
'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', {
role: 'annotation'
}
],
['2016', 10, 24, 20, 32, 18, 5, 10, 7, 8, 12, 21, 36, '']
]);
var options = {
width: '100%',
height: 395,
legend: {
position: 'top',
maxLines: 3
},
bar: {
groupWidth: '75%'
},
isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Plain jQuery, more expensive
/*
$(window).resize(function() {
drawStacked();
});
*/
// Using throttledresize.js
$(window).on("throttledresize", function (event) {
drawStacked();
});