Highcharts Demo

author(s): Torstein Hønsi

by valk

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap'
    },

    colorAxis: {
      dataClasses: [{
        to: 1,
        color: '#00FF00'
      }, {
        from: 1,
        to: 2,
        color: '#FF0000'
      }, {
        from: 2,
        to: 3,
        color: '#0000FF'
      }, {
        from: 3,
        to: 4,
        color: '#F0F0F0'
      }, {
        from: 4,
        to: 5,
        color: '#c1c5c0'
      }, {
        from: 5,
        to: 6,
        color: '#00FFFF'
      }, {
        from: 6,
        to: 7,
        color: '#FFFF00'
      }, {
        from: 7,
        to: 8,
        color: '#FF00F0'
      }, {
        from: 8,
        to: 9,
        color: '#00F040'
      }, {
        from: 9,
        to: 10,
        color: '#44884f'
      }, ]
    },


    series: [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [
        [0, 0, 1],
        [0, 1, 1.9],
        [0, 2, 0.8],
        [0, 3, 2.4],
        [0, 4, 6.7],
        [1, 0, 9.2],
        [1, 1, 5.8],
        [1, 2, 7.8],
        [1, 3, 11.7],
        [1, 4, 4.8],
        [2, 0, 3.5],
        [2, 1, 1.5],
        [2, 2, 1.23],
        [2, 3, 6.4],
        [2, 4, 5.2],
        [3, 0, 7.2],
        [3, 1, 13.2],
        [3, 2, 1.14],
        [3, 3, 1.9],
        [3, 4, 16],
        [4, 0, 38],
        [4, 1, 5],
        [4, 2, 8],
        [4, 3, 117],
        [4, 4, 115],
        [5, 0, 8.8],
        [5, 1, 3.2],
        [5, 2, 1.2],
        [5, 3, 6],
        [5, 4, 1.2],
        [6, 0, 1.3],
        [6, 1, 4.4],
        [6, 2, 8.8],
        [6, 3, 9.8],
        [6, 4, 9.6],
        [7, 0, 3.1],
        [7, 1, 1],
        [7, 2, 8.2],
        [7, 3, 3.2],
        [7, 4, 3.0],
        [8, 0, 8.5],
        [8, 1, 9.7],
        [8, 2, 1.23],
        [8, 3, 6.4],
        [8, 4, 8.4],
        [9, 0, 4.7],
        [9, 1, 11.4],
        [9, 2, 3.1],
        [9, 3, 4.8],
        [9, 4, 9.1]
      ],
      dataLabels: {
        enabled: false,
       ...