Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 140px; min-width: 810px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80
        },


        title: {
            text: 'Cloud Cover'
        },

        xAxis: {
            type:'datetime',
            tickPixelInterval: 50
            //min: Date.UTC(2013, 3, 1),
            //max: Date.UTC(2013, 3, 30)
        },

        yAxis: {
            title: {
                text: null
            },
            categories: ['Cloud'],
            minPadding: 20,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false,
            tickWidth: 1
        },

        colorAxis: {
            stops: [
                [0, 'rgba(0,0,250,0.6)'],
                [0.6, 'rgba(220,220,250,0.6)'],
                [1.0, 'rgba(120,120,120,0.6)']
            ],
            min: 0,
            max: 100
        },
        

        series: [{
            name: 'Clouds',
            borderWidth: 1,
            borderWidth: 0,
            colsize: 3 * 36e5, // 3 hours
            data: [
[Date.UTC(2014, 7, 10, 09, 00), 0, 16 ],
[Date.UTC(2014, 7, 10, 12, 00), 0, 20 ],
[Date.UTC(2014, 7, 10, 15, 00), 0, 0 ],
[Date.UTC(2014, 7, 10, 18, 00), 0, 0 ],
[Date.UTC(2014, 7, 10, 21, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 00, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 03, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 06, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 09, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 12, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 15, 00), 0, 0 ],
[Date.UTC(2014, 7, 11, 18, 00), 0, 44 ],
[Date.UTC(2014, 7, 11, 21, 00), 0, 36 ],
[Date.UTC(2014, 7, 12, 00, 00), 0, 48 ],
[Date.UTC(2014, 7, 12, 03, 00), 0, 76 ],
[Date.UTC(2014, 7, 12, 06, 00), 0, 88 ],
[Date.UTC(2014, 7, 12, 09, 00), 0, 88 ],
[Date.UTC(2014, 7, 12, 12, 00), 0, 8 ],
[Date.UTC(2014, 7, 12, 15, 00), 0, 56 ],
[Date.UTC(2014, 7, 12, 18, 00), 0, 0 ],
[Date.UTC(2014, 7, 12, 21, 00), 0, 0 ],
[Date.UTC(2014, 7, 13, 00, 00), 0, 8 ],
[Date.UTC(2014,...