MGH Gray Building: 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>

<!-- Custom Tooltip content. Use an AT/SR friendly class to hide this from sighted users -->
<div class="hide" id="sept2012">

    <div id="jan2012">
        <p>January was the month with the greatest whole-building energy use and the greatest heating-related energy use.</p>
    </div>
    
    <div id="may2012">
        <p>May was the month with the lowest whole-building energy use.  In this month, the category that consumed the most energy was ‘reheat and heating.’</p>
    </div>
    
</div>

CSS

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

JavaScript

// 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','#A0A0A0','#E52E90','#FF9233','#814A19','#8126C0','#AD2323','#81C57A','#9DAFFF','#29D0D0','#2A4BD7']
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
 
var chart = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: 'container',
            height: 650,
        },
        title: {
            text: 'MGH Gray Building: Site Energy Use'
        },
        exporting: { enabled: false },
        xAxis: {
            categories: [
                'Oct 2011','Nov 2011',
                'Dec 2011','Jan 2012',
                'Feb 2012','Mar 2012',
                'Apr 2012','May 2012',
                'Jun 2012','Jul 2012',
                'Aug 2012','Sep 2012'
            ]
        },
        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',
            verticalAlign: 'bottom'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black 0 0 3px black'
                    }
                }
                /*
        ...