HeatMap

x : Value y : Date

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

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

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap'
    },


    title: {
      text: 'Heat map',
      align: 'left'
    },

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

    yAxis: {

      //tickPixelInterval: 50,
      //min: Date.UTC(2015, 5, 1),
      //max: Date.UTC(2015, 5, 5),
      type: 'datetime' //attribute not given in API
      //has no effect when using CSV format
    },

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

    series: [{
      borderWidth: 0,
      rowsize: 24 * 36e5, // one day
      tooltip: {
        headerFormat: 'Temperature<br/>',
        pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
      },
      data: [
        [0, Date.UTC(2015, 05, 01), 2.0],
        [1, Date.UTC(2015, 05, 01), 1.7],
        [2, Date.UTC(2015, 05, 01), 1.5],
        [3, Date.UTC(2015, 05, 01), 1.5],
        [4, Date.UTC(2015, 05, 01), 1.1],
        [5, Date.UTC(2015, 05, 01), 1.1],
        [6, Date.UTC(2015, 05, 01), 1.1],
        [7, Date.UTC(2015, 05, 01), 0.8],
        [8, Date.UTC(2015, 05, 01), 0.3],
        [0, Date.UTC(2015, 05, 02), 1.0],
        [1, Date.UTC(2015, 05, 02), -1.7],
        [2, Date.UTC(2015, 05, 02), 1.5],
        [3, Date.UTC(2015, 05, 02), -1.5],
        [4, Date.UTC(2015, 05, 02), 1.1],
        [5, Date.UTC(2015, 05, 02), 1.1],
        [6, Date.UTC(2015, 05, 02), -1.1],
        [7, Date.UTC(2015, 05, 02), 0.8],
        [8, Date.UTC(2015, 05, 02), -0.3],
        [0, Date.UTC(2015, 05, 03), 2.0],
        [1, Date.UTC(2015, 05, 03), -1.7],
        [2, Date.UTC(2015, 05, 03), -1.5],
        [3, Date.UTC(2015, 05, 03), -2.5],
        [4,...