Pie Chart

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">
    <div id="reheat">
        <a href="/node/947371">Heating and Reheating</a>
    </div>
 
    <div id="imaging">
        <a href="/node/947461">Medical Imaging</a>
    </div>
 
    <div id="lighting">
        <a href="/node/947446">Lighting and Other Electric Loads (e.g., Plug)</a>
    </div>
 
    <div id="fans">
        <a href="/node/947371">Supply, Return/Exhaust, and Exhaust Fans</a>
    </div>
 
    <div id="pumps">
        <a href="/node/947371">Pumps for Hot Water and Heat Recovery</a>
    </div>
 
    <div id="chillers">
        <a href="/node/947411">Chiller Plant (Allocated): Chillers,<br> Cooling Tower Fans, and Cooling System Pumps</a>
    </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;
 
        switch( obj.key ) {
            case 'Reheat and Heating':
                tooltip = jQuery('#reheat').html();
                break;
            case 'Medical Imaging':
                tooltip = jQuery('#imaging').html();
                break;
            case 'Lighting and Other Electric Loads (e.g., Plug)':
                tooltip = jQuery('#lighting').html();
                break;
            case 'Supply, Return/Exhaust, and Exhaust Fans':
                tooltip = jQuery('#fans').html();
                break;
            case 'Chiller Plant (Allocated): Chillers,<br> Cooling Tower Fans, and Cooling System Pumps':
                tooltip = jQuery('#chillers').html();
                break;
            default:
                console.log('default');
                tooltip =  '<span style="color:' + obj.series.color + '">' + obj.key + '</span>';
                break;
        }
        tooltip += '<br />'+ obj.percentage.toFixed(1) + '%';
        return tooltip;
    };
/*
*  Recommendations:
*   Match color palette
*   Pull data into its own section or file
*/
Highcharts.theme = {
    colors: ['#FF9233','#A14A19','#8126C0','#AD2323','#1D6914','#E52E90','#000000','#81C57A','#9DAFFF','#29D0D0','#2A4BD7','#FFEE33','#E9DEBB','#FFCDF3','#ffffff']
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    var chart = new Highcharts.Chart({
        chart: {
            type: 'pie',
            height: 650,
            renderTo: 'container',
            plotBackgroundColor: null,
            plotShadow: false
        },
        title: {
            text: 'Average End Use Breakdown: Massachusetts General Hospital Gray Building'
        },
        exporting: { enabled: false },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
...