Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://github.highcharts.com/scrollbar-dev/highstock.src.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>


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

<pre id="_csv" style="display: none">Date, Time, Temperature
2013-04-01,0,-0.7
2013-04-02,0,-3.4
2013-04-03,0,-1.1</pre>

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

JavaScript

$(function() {
  $('#container').highcharts({
    data: {
      csv: document.getElementById('csv').innerHTML
    },
    chart: {
      type: 'heatmap',
      inverted: true
    },
    xAxis: {
      min: Date.UTC(2015, 4, 1),
      max: Date.UTC(2015, 4, 10),
      reversed: true,
      scrollbar: {
        enabled: true
      }
    },
    yAxis: {
      minPadding: 0,
      maxPadding: 0,
      startOnTick: false,
      endOnTick: false,
      reversed: true,
      min: 15,
      max: 23,
      scrollbar: {
        enabled: true,
        zIndex: 7
      }
    },
    colorAxis: {
      stops: [
        [0, '#3060cf'],
        [0.5, '#fffbbc'],
        [0.9, '#c4463a']
      ],
      min: -10,
      max: 20
    },
    series: [{
      dataLabels: {
				enabled: true
      },
      colsize: 24 * 36e5
    }]
  });
});