Highcharts Demo

author(s): Torstein Hønsi

by watti

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div id="container" style="height: 450px; max-width: 450px; margin: 0 auto"></div>

<pre id="csv" style="display: none">Date, Time, Temperature
1,0,1.4
2,1,0.9
3,2,0.3
2017-05-01,3,-0.5
2017-05-01,4,-0.5
2017-05-01,5,-0.5
2017-05-01,6,-0.6
</pre>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'heatmap',
        inverted: true
    },

    data: {
        csv: document.getElementById('csv').innerHTML
    },

    title: {
        text: 'Highcharts heat map',
        align: 'left'
    },

    subtitle: {
        text: 'Temperature variation by day and hour through May 2017',
        align: 'left'
    },

    xAxis: {
        tickPixelInterval: 50
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value}:00'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 6, 12, 18, 24],
        tickWidth: 1,
        min: 0,
        max: 23
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a']
        ],
        min: -5
    },

    series: [{
        borderWidth: 0,
        colsize: 24 * 36e5, // one day
        tooltip: {
            headerFormat: 'Temperature<br/>',
            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
        }
    }]
});