GROUPED COLUMN GOOGLE CHARTS

by Charles Clayton

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="stackedBar" style></div>

CSS

chart {
    width: 500px;
    height: 500px;
    margin:20px;
}

JavaScript

var data = [
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
];

google.load('visualization', '1', {
    'packages': ['corechart']
});

google.setOnLoadCallback(drawChart);

function drawChart() {

    new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw(
        new google.visualization.arrayToDataTable(data), {});

    new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw(
        new google.visualization.arrayToDataTable(data), {isStacked:true});
}