Highcharts Demo

author(s): Torstein Hønsi

by kannankeril

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/heatmap.js"></script>

<!-- 
    Added turboThreshold option to chart to eliminate the 1000 cell limitation on heatmaps 
-->

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

<pre id="csv" style="display: none">Date, Time,...

JavaScript

$(function () {
    $('#container').highcharts({
        data: {
            csv: document.getElementById('csv').innerHTML
        },
        chart: {
            type: 'heatmap',
            inverted: true
        },
        title: {
            text: 'Temperature Study Heatmap',
            align: 'center'
        },
        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [0.5, '#fffbbc'],
                [0.9, '#c4463a']
            ],
            min: -5
        },
        series: [{
            turboThreshold: 100000,
            borderWidth: 1,
            colsize: 24 * 36e5, // one day
        }]
    });
});