Column Chart Example

An example of a Google Column Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="barchart_material"></div>

JavaScript

google.load("visualization", "1.0", {
    packages: ["bar"]
});
google.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],
        ['2017', 1030, 540, 350]
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        },
        axes: {
            y: {
                all: {
                    range: {
                        max: 3000,
                        min: 500
                    }
                }
            }
        },
        bars: 'vertical', // Required for Material Bar Charts.
        width: 800,
        height: 600
    };

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


    chart.draw(data, options);
}