Highcharts Demo

author(s): Torstein Hønsi

by Fusher

HTML

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

<div id="container" style="height: 400px; width: 700px;"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        colors: [
            '#910000', '#009100', '#2f7ed8'],

        title: {
            text: "Tuesday, August 20, 2013"
        },
        
        legend: {
            labelFormatter: function() {
                
              var sum = 0,
                  data = this.options.data;
                
                if(this.index<3) { 
                    $.each(data,function(i,e){
                        sum += e;
                    
                    });
                    
                    return this.name +'<br><span style="color:#ae7e00">Total: ' + Highcharts.numberFormat(sum,2,',') + ' kWh</span>'
                }
                else {
                    return this.name
                }
            }
        },

        chart: {
            type: 'column'
        },
  
        
        xAxis: {
            type: 'datetime',
            tickInterval: 60 * 60 * 1000,
            dateTimeLabelFormats: {
                day: '%b %e',
                hour: '%l %p'
            }

        },
        yAxis: [{
            title: {
                text: "kWh"
            }
        }, {
            opposite: true,
            labels: {
                format: '{value}�F',
                style: {
                    color: '#894EA5'
                }
            },
            title: {
                text: 'Pool Temp',
                style: {
                    color: '#894EA5'
                }
            }
        }],

        plotOptions: {
            column: {
                stacking: 'normal'
            },
            line: {
                marker: {
                    enabled: false
                }
            }
        },

        tooltip: {
            shared: true,
            dateTimeLabelFormats: {
                day: '%b %e',
                hour: '%A, %b %e, %l:%M%p',
                minute: '%A, %b %e, %l:%M%p'
            }
        },

        series: [

        {
       ...