Heat map

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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

React

const CELLS_IN_ROW = 8;

function getPointCategoryName(point, dimension) {
  const series = point.series,
    isY = dimension === 'y',
    axis = series[isY ? 'yAxis' : 'xAxis'];
  return axis.categories[point[isY ? 'y' : 'x']];
}

function getSeverity(e) {
  const val = e.point.value;
  let retVal = '';
  if (val < 30) {
    retVal = 'Low';
  } else if (val < 50) {
    retVal = 'Medium';
  } else if (val < 70) {
    retVal = 'High';
  } else if (val <= 100) {
    retVal = 'Extreme';
  }
  return retVal;
}

function getWeekDay(e) {
  const toFull = {
    "Sun": "Sunday",
    "Mon": "Monday",
    "Tue": "Tuesday",
    "Wed": "Wednesday", 
    "Thu": "Thursday",
    "Fri": "Friday",
    "Sat": "Saturday"
  };
  return toFull[e.series.yAxis.categories[e.point.y]];
}

function getTimeWindow(e) {
  const idx = e.point.x;
  return time = e.series.xAxis.categories[idx];
}

function makePopupText(e) {
  return `Severity: <b> ${getSeverity(e)} </b><br/><b>${getWeekDay(e)} ${getTimeWindow(e)} </b>`;
}


Highcharts.chart('container', {
  "chart": {
    "type": "heatmap",
    "spacingBottom": 20,
    "spacingLeft": 0,
    "spacingRight": 0,
    "spacingTop": 0,
    "marginTop": 20,
    "backgroundColor": "rgba(0,0,0,0)",
    "height": 300,
    "width": 500
  },
  "credits": {
    "enabled": false
  },
  title: false,
  "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": ""
    }
  },
    
  "legend": {
    "align": 'right',
    "layout": 'vertical',
    "margin": 0,
    "verticalAlign": 'top',
    "y": 25,
    "symbolHeight": 180,
    "showFirstLabel": false,
    "showLastLabel": false,

  },
    
  "colorAxis": {
    gridLineColor: '#888',
    "reversed": false,
   ...