Google Charts - Area between two lines

gcharts_area_between_lines.js

// Sourced from http://jsfiddle.net/asgallant/ydNT2/

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['X', 'Y1', 'Y2'],
        [0, 6, 12],
        [1, 4, 9],
        [2, 8, 14],
        [3, 3, 10],
        [4, 5, 11],
        [5, 2, 7],
        [6, 8, 9],
        [7, 6, 7]
    ]);
    
    var view = new google.visualization.DataView(data);
    // repeat column 1 twice, then calculate the value of column 2 (will be column 3 in the end)
    view.setColumns([0, 1, 1, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function (dt, row) {
            // return the difference between column 2 and 1 as the value
            // and the formatted value of 2 as the formatted value
            return {
                v: dt.getValue(row, 2) - dt.getValue(row, 1),
                f: dt.getFormattedValue(row, 2)
            };
        }
    }]);
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        isStacked: true,
        series: {
            0: {
                type: 'line'
            },
            1: {
                type: 'area',
                color: 'transparent',
                visibleInLegend: false
            },
            2: {
                type: 'area'
            }
        }
    });
}