Highcharts Demo

author(s): Torstein Hønsi

by dieuhd

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px;"></div>

CSS

#container
{
    background:red;
}

JavaScript

$(function () {
    var today = new Date('2015/03/30 00:00:00');
    var prevDate = new Date(today);
    var tomorow = new Date(today);
    var categories = [],
        data = [],
        xTicks = [];

    tomorow.setDate(today.getDate() + 1);
    prevDate.setDate(today.getDate() - 9);
    prevDate.setHours(0);
    prevDate.setMinutes(0);
    prevDate.setSeconds(0);
    for (i = 0; i < 10; i++) {
        var currentDate = new Date(prevDate);
        currentDate.setDate(prevDate.getDate() + i);
        xTicks[i] = new Date(currentDate);
        for (var hour = 0; hour < 4; hour++) {
            currentDate = new Date(prevDate);
            currentDate.setDate(prevDate.getDate() + i);
            currentDate.setHours(hour * 6);
            categories[i * 4 + hour] = new Date(currentDate);
            data[i * 4 + hour] = Math.floor((Math.random() * 5) + i * 24 + hour);
        }
    }


    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        xAxis: {
            title: {
                text:''
            },
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%e %b'
            },
            endOnTick: true,
            startOnTick: true,
            showLastLabel: true,
            showFirstLabel:true,
            opposite: true,
            labels: {
                enabled: false
            },
            tickPixelInterval: 10,
            tickWidth: 0,
            categories: categories,
            gridLineWidth: 1
        },
        yAxis: {
            reversed: true,
            gridLineWidth: 0,
            endOnTick: true,
            showLastLabel: false,
            showFirstLabel:false,
            startOnTick: true,
            tickPositions:[-10,1,230,240],
            minorTickWidth: 0
        },
        series: [{
            data: data
        }]
    });
});