Heat map

JavaScript Heatmap

Quick reference

Considering the example below:

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.js"></script>

<div class='row'>
    <div class='column p10'>
        <div id='heat-map'></div>
    </div>
</div>

<script>
var root = document.getElementById('heat-map');
var initialDate = '2021-01-01';

var year = [];
var date = new Date(initialDate);

while (year.length < 366) {
  year.push({
    date: date.toISOString().slice(0, 10),
    value: Math.random() * 10,
  });

  date.setDate(date.getDate() + 1);
}

var heatMap = jSuites.heatmap(root, {
  data: year,
  date: initialDate,
});
</script>
</html>

Methods

Method	Description
heatMap.getData();	Return an array with the same values as the plugin's data array
heatMap.setData(data);	Change the plugin's data array to the array passed as argument

Events

Method	Description
onload	when the plugin loads. `onload(DOMElement element, Object instance) => void`

Initialization options

Property	Description
title: string	The title of the heat map.
data: Array({ date: 'yyyy-mm-dd', value: number })	The plugin days and its values.
date: 'yyyy-mm-dd'	The starting day of the plugin.
colors: string[]	The colors used to fill the days. Must be an array with 5 colors.
tooltip: boolean	Caption applied at the end of the plugin.

Edit this page on GitHub