combo stacked bar chart

by ian_smithz

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>

CSS

#chart_div {
  width: 50%; 
  min-height: 450px;
}

JavaScript

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Open');
    data.addColumn('number', 'Close');
    data.addColumn('number', 'CTC');
    
    data.addRow(['F12', 0, 0,0]);
    data.addRow([null, null, null, null]);
    data.addRow(['F13', 37, 37,105]);
    
    var countVAxis = 5;
    
    var options = {
        width: 600,
        height: 400,
        isStacked: true,
        interpolateNulls: true,
        vAxes: { 
            0:{
                title: "Number of Sites", format: '#', 
                titleTextStyle:  {color: 'black', fontName: '"Arial"', fontSize: '16'},
                gridlines: {count: countVAxis, color: 'black'}
            },
            1: {
                title: "Cost",
                format: '#$'
            }
        }, 
        seriesType: "bars",
        series: {
            2: {
                type: "line",
                targetAxisIndex: 1 // use the right vAxis
            }
        },        
        colors: [
            '#FF8080',
            '#8080FF',
            '#FF0000',
            '#0000FF',
            '#DDDDDD'
        ]
    }

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