Highcharts From Google Spreadsheets

by oakley808

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<div id="container"></div>

JavaScript

$(function() {
    var globalConfig = {
        xAxisTitle: '',
        y1AxisTitle: 'Power (kW)',
        y2AxisTitle: 'Temperature (F)',
    }

    var config = {
        title: 'Bartell, North Bend <br>1/21/15 - 10-min DR Event',
        key: '1FpWFD_KiyMralaHxupDSwg0S3j3eLDushuo3T9iWYoU'
    }

    var options = {
        chart: {
            renderTo: 'container',
            type: 'line',
            zoomType: 'x'
        },
        title: {
            text: config.title
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            y: 100
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            series: {
                pointInterval: 3600 * 1000, // hours?
                marker: {
                    enabled: null,
                    radius: 5,
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            }
        },        
        data: {
            googleSpreadsheetKey: config.key,
            firstRowAsNames: true,
            parsed: function(columns) {
                // dump the last event column.
                columns.pop()
                
                // handle missing values (undefined => null)
                $.each(columns, function(i, c) {
                    $.each(c, function(j, p) {
                        if (p === undefined) {
                            columns[i][j] = null;
                        }
                    });
                });
            },
            complete: function(options) {
                //console.log(options.series) // options.series!
            }
        },
        yAxis: [{
            title: {
                text: globalConfig.y1AxisTitle
            },
            gridLineWidth: 1,
            tickInterval: 5
        }, {
      ...