SUNY UMU East Wing: Site Energy

by oakley808

HTML

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

<div class="hide">
    
    <div id="july2012">
        <p>July was the month with the greatest total energy use for the monitored loads. In this month, the end-use categories that consumed the most energy were chillers, ‘supply and return/exhaust fans,’ and ‘reheat and heating.’</p>
    </div>

    <div id="feb2013">
        <p>February was the month with the lowest total energy use for the monitored loads.  In this month, the end-use categories that consumed the most energy were ‘supply and return/exhaust fans’ and ‘reheat and heating.’</p>
    </div>
</div>

CSS

.hide {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

JavaScript

'use strict';
// Tooltip helper function
var selectTooltip = function( obj ){
    var tooltip;

    tooltip = jQuery('#' + obj.key ).html() ||  '';
    tooltip +=  '<span style="color:' + obj.series.color + '">' + obj.series.name + '</span>: <b>' + obj.y + '</b><br/>';
    
    return tooltip;
};

 
Highcharts.theme = {
    colors: ['#000000','#575757','#AD2323','#2A4BD7','#1D6914','#814A19','#8126C0','#A0A0A0','#81C57A','#9DAFFF','#29D0D0','#FF9233','#FFEE33','#E9DEBB','#FFCDF3','#ffffff']
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

var chart = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: 'container'
        },
        title: {
            text: 'SUNY UMU East Wing: Site Energy'
        },
        exporting: { enabled: false },
        xAxis: {
            categories: [
                'May 2012','Jun 2012','Jul 2012','Aug 2012',
                'Sep 2012','Oct 2012','Nov 2012','Dec 2012',
                'Jan 2013','Feb 2013','Mar 2013','Apr 2013'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Energy Consumption (MMBtu)'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            align: 'right',
            verticalAlign: 'top',
            y: 35
        },
        tooltip: {
            useHTML: true,
            formatter: function () {
                return selectTooltip(this); // helper function
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                    color: (Highcharts.theme &&...