Highcharts Demo

author(s): Torstein Hønsi

by valk

HTML

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


<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "heatmap",
    "spacingBottom": 20,
    "spacingLeft": 0,
    "spacingRight": 0,
    "spacingTop": 0,
    "marginTop": 20,
    "backgroundColor": "rgba(0,0,0,0)",
    "height": 300
  },
  "credits": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "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"],
    "labels": {
      "rotation": -45,
      "style": {
        "fontSize": "9px"
      }
    }
  },
  "yAxis": {
    "categories": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    "title": {
      "text": ""
    }
  },
  "colorAxis": {
    "min": 0,
    "max": 100,
    "reversed": false,
    "gridLineColor": "#888",
    "stops": [
      [0.3, "#ffffff"],
      [0.3, "#fdd6e2"],
      [0.5, "#fdd6e2"],
      [0.5, "#fc92b3"],
      [0.7, "#fc92b3"],
      [0.7, "#fa719c"]
    ],
    "tickAmount": 0
  },
  "legend": {
    "align": "right",
    "layout": "vertical",
    "margin": 15,
    "verticalAlign": "top",
    "symbolHeight": 205,
    "borderColor": "#000",
    "borderWidth": 1,
    'symbolPadding': 10,
    useHTML: true
  },
  "tooltip": {},
  "series": [{
    "type": "heatmap",
    "borderWidth": 1,
    "borderColor": "#aaa",
    "data": [
      [0, 0, 28],
      [0, 1, 37],
      [0, 2, 36],
      [0, 3, 32],
      [0, 4, 30],
      [0, 5, 32],
      [0, 6, 4],
      [1, 0, 37],
      [1, 1, 41],
      [1, 2, 41],
      [1, 3, 40],
      [1, 4, 40],
      [1, 5, 40],
      [1, 6, 3],
      [2, 0, 37],
      [2, 1, 36],
      [2, 2, 35],
      [2, 3, 36],
      [2, 4, 36],
      [2, 5, 36],
      [2, 6, 4],
      [3, 0, 38],
      [3, 1, 41],
      [3, 2, 39],
      [3, 3, 39],
      [3, 4, 40],
      [3, 5, 40],
      [3, 6, 3],
      [4, 0, 34],
      [4, 1, 28],
      [4, 2, 33],
      [4, 3, 30],
      [4, 4, 27],
      [4, 5, 34],
      [4, 6, 4],
      [5, 0, 26],
      [5, 1, 19],
   ...