An Example of a Google Bar Chart

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

JavaScript

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

function drawLineColors() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'A');
    data.addColumn('number', 'B');
    data.addColumn('number', 'C');
    data.addColumn('number', 'D');

    data.addRows([
        [0, 5, 3, 0, 0],
        [-1, 2, 5, 0, 0],
        [-2, 0, 4, 0, 0],
        [-3, -2, 6, 0, 0],
        [-4, -1, 8, 0, 0],
        [-5, 0, 11, 0, 0],
        [-6, 0, 12, 0, 0],
        [-7, 0, 14, 0, 0],
        [-8, 0, 16, 0, 0],
        [-9, 0, 12, 0, 0],
        [-10, 0, 9, 0, 0],
        [-10.5, 0, 7, 0, 0],
        [-11, 0, 6, 0, 0],
        [-11.5, 0, 4, 0, 0],
        [-12, 0, 0, 0, 0], ]);

    var options = {
        hAxis: {
            title: 'Foo',
                'ticks': [-40, -20, 0, 20, 40]
        },
        vAxis: {
            title: 'Bar',
                'ticks': [0, -2, -4, -6, -8, -10, -12, -14, -16, -18]
        },
        colors: ['#a52714', '#097138', '#aabbcc', '#334455'],
        orientation: 'vertical',
        height: 800,
        width: 320,
            'legend': {
            'position': 'in'
        }
    };
    options.orientation = 'vertical';

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}