Highcharts individual useUTC

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

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

<div id="container1" style="height: 200px"></div>
<div id="container2" style="height: 200px"></div>

JavaScript

$(function () {
    
    /**
     * Highcharts plugin for using individual global.useUTC settings
     */
    (function (H) {
        H.wrap(H.Chart.prototype, 'init', function (proceed, userOptions, callback) {
            var useUTC = userOptions.global && userOptions.global.useUTC;
            function setUTC() {
                H.setOptions({
                    global: {
                        useUTC: useUTC
                    }
                });
            }
            if (useUTC !== undefined) {
                setUTC();
            }
            proceed.call(this, userOptions, callback);
            
            if (useUTC !== undefined) {                
                H.addEvent(this.container, 'mouseover', setUTC);
            }

            
        });
        
    }(Highcharts));
    
    
    
    $('#container1').highcharts({
        
        global: {
            useUTC: true
        },       
        
        title: {
            text: 'useUTC = true'
        },
        
        xAxis: {
            type: 'datetime'
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 3600 * 1000 // one hour
        }]
    });
    
    $('#container2').highcharts({
        
        global: {
            useUTC: false
        },       
        
        title: {
            text: 'useUTC = false'
        },

        xAxis: {
            type: 'datetime'
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 3600 * 1000 // one hour
        }]
    });
});