PHP JavaScript: Google Stacked column charts

You can create a stacked column chart by setting isStacked option true in the normal column chart code.

Here we are explaining the simple example.

Html Code

<html>

<head>

google.charts.load('current', {'packages':['bar']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Year', 'Sales', 'Expenses', 'Profit'],

['2014', 1000, 400, 200],

['2015', 1170, 460, 250],

['2016', 660, 1120, 300],

]);

var options = {

chart: {

title: 'Company Performance',

subtitle: 'Sales, Expenses, and Profit: 2014-2017',

isStacked:true,

colors:['orange'],

};

var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));

}

</script>

</head>

<body>

</body>

</html>

Result

PHP JavaScript