HeatMap

x : Date y : Value

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: {
      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
    },

    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>'
      },
      data: [
        [Date.UTC(2015, 05, 01), 0, 2.0],
        [Date.UTC(2015, 05, 01), 1, 1.7],
        [Date.UTC(2015, 05, 01), 2, 1.5],
        [Date.UTC(2015, 05, 01), 3, 1.5],
        [Date.UTC(2015, 05, 01), 4, 1.1],
        [Date.UTC(2015, 05, 01), 5, 1.1],
        [Date.UTC(2015, 05, 01), 6, 1.1],
        [Date.UTC(2015, 05, 01), 7, 0.8],
        [Date.UTC(2015, 05, 01), 8, 0.3],
        [Date.UTC(2015, 05, 01), 9, , 0.7],
        [Date.UTC(2015, 05, 01), 10, 1.0],
        [Date.UTC(2015, 05, 01), 11, 3.4],
        [Date.UTC(2015, 05, 01), 12, 4.5],
        [Date.UTC(2015, 05, 01), 13, 5.5],
        [Date.UTC(2015, 05, 01), 14, 5.7],
        [Date.UTC(2015, 05, 01), 15, 6.7],
        [Date.UTC(2015, 05, 01), 16, 6.0],
        [Date.UTC(2015, 05, 01), 17, 5.7],
        [Date.UTC(2015, 05, 01), 18, 5.1],
        [Date.UTC(2015, 05, 01), 19, 5.0],
        [Date.UTC(2015, 05, 01), 20, 4.5],
        [Date.UTC(2015, 05, 01), 21, 3.3],
       ...