ElementStacks

by Fusher

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 300px;width:800px;"></div>

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        type: 'datetime',
        tickInterval: 3600 * 1000,
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%H', this.value);  
            }
        }            
    },
        yAxis: { 
        maxPadding: 0.2,
        minPadding: 0.2,
        minorGridLineWidth: 0,
        minorTickInterval: 1,
        minorTickWidth: 1,
        showFirstLabel: true,
        showLastLabel: true,
        tickPixelInterval: 40,
            startOnTick: false,
            endOnTick: false,
        min: 0.5,
        max: 4.5,
        title: {
            text: '</br>'
        },         
        lineWidth: 1,
        gridLineColor: '#cccccc'
        },
    plotOptions: {
        series: {
            step: true,
            marker: {
                enabled: false
            }
        }        
    },    
    
    series: [{
        data: [
            [Date.UTC(2011, 10, 13, 0,0,0), 1],
            [Date.UTC(2011, 10, 13, 4,45,23), 2],
            [Date.UTC(2011, 10, 13, 6,0,0), 3],
            [Date.UTC(2011, 10, 13, 8,40,0), 3],
            [Date.UTC(2011, 10, 13, 11,0,0), 3],     
            [Date.UTC(2011, 10, 13, 15,40,0), 3],            
            [Date.UTC(2011, 10, 13, 19,0,0), 4],
            [Date.UTC(2011, 10, 13, 23,59,59), 4]
         ]
    }]

});