HeatMap

Date as value in cell

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: {
      type: 'linear' //attribute not given in API
      //has no effect when using CSV format
    },

    yAxis: {
      title: {
        text: null
      },
    },

    colorAxis: {
      stops: [
        [0, '#3060cf'],
        [0.5, '#fffbbc'],
        [0.9, '#c4463a']
      ],
      labels: {
        format: '{value:%Y}',
        rotation: -45
      }

    },

    series: [{
      borderWidth: 0,
      data: [
        [0, 0, Date.UTC(2015, 05, 01)],
        [0, 1, Date.UTC(2014, 05, 01)],
        [0, 2, Date.UTC(2013, 05, 01)],
        [0, 3, Date.UTC(2006, 05, 01)],
        [0, 4, Date.UTC(2010, 05, 01)],
        [1, 0, Date.UTC(2012, 05, 01)],
        [1, 1, Date.UTC(2011, 05, 01)],
        [1, 2, Date.UTC(2010, 05, 01)],
        [1, 3, Date.UTC(2012, 05, 01)],
        [1, 4, Date.UTC(2015, 05, 01)],
        [2, 0, Date.UTC(2009, 05, 01)],
        [2, 1, Date.UTC(2008, 05, 01)],
        [2, 2, Date.UTC(2007, 05, 01)],
        [2, 3, Date.UTC(2013, 05, 01)],
        [2, 4, Date.UTC(2009, 05, 01)],
      ]

    }]

  });
});