Highcharts Demo

author(s): Torstein Hønsi

by Maulik Anand

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


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

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },


    title: {
      text: 'Sales per employee per weekday'
    },

    xAxis: {
      categories:  ["Sat 10 September", "Sun 11 September", "Mon 12 September", "Tue 13 September", "Wed 14 September", "Thu 15 September"]
    },

    yAxis: {
      categories:["00:00-03:00", "03:00-06:00", "06:00-09:00", "09:00-12:00", "12:00-15:00", "15:00-18:00", "18:00-21:00", "21:00-00:00"],
      title: null
    },

    colorAxis: {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 280
    },

    tooltip: {
      formatter: function() {
        return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
          this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
      }
    },

    series: [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [
        [0, 0, 0.0],
        [0, 1, 0.0],
        [0, 2, 0.0],
        [0, 3, 0.96],
        [0, 4, 0.00],
        [0, 5, 0.77],
        [0, 6, 0.55],
        [0, 7, 2.34],
        [1, 0, 0.0],
        [1, 1, 0.0],
        [1, 2, 0.0],
        [1, 3, 0.0],
        [1, 4, 1.24],
        [1, 5, 0.13],
        [1, 6, 1.28],
        [1, 7, 1.07],
        [2, 0, 0.12],
        [2, 1, 0.00],
        [2, 2, 0.00],
        [2, 3, 1.59],
        [2, 4, 0.35],
        [2, 5, 0.00],
        [2, 6, 1.6],
        [2, 7, 1.36],
        [3, 0, 1.60],
        [3, 1, 0.00],
        [3, 2, 0.00],
        [3, 3, 0.0],
        [3, 4, 0.0],
        [3, 5, 0.0],
        [3, 6, 0.0],
        [3, 7, 0.85],
        [4, 0, 3.35],
        [4, 1, 0.00],
        [4, 2, 0.59],
        [4, 3, 0.0],
        [4, 4, 0.0],
        [4, 5,...