Combo Chart Example

An example of a Google Combo Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Average', 'green bars', 'red bars', 'line'],
        ['', null, null, 3],
        ['1', 5, null, 3],
        ['2', null, 5, 3],
        ['3', 4, null, 3],
        ['4', null, null, 3],
        ['5', 2, null, 3],
        ['', null, null, 3]
    ]);

    var options = {
        scaleStartValue: 1,
        crosshair: { orientation: 'vertical'},
        vAxis: {
        		gridlines :{
            	color:'red'
            },
            format: "###"
        },
        hAxis: {
            format: "###"
        },
        seriesType: "bars",
        bar: {
            groupWidth: '90%'
        },
        series: {
            0: {
                color: "#48BA02"                
            },
            1: {
                color: "red",
                pointSize: 2
            },
            2: {
                type: "line",
                color: '#0000ff'
            }
        }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(data, options);
    console.log(chart);
    chart.datasets[0].bars[2].strokeColor = "rgba(255,0,0,1)";
    chart.update();
}