Chart.HeatMap

DISCONTINUED. A Heat Map library and plug-in for Chart.js.


Download

Introduction

This has been discontinued. It may or may not still work. Alternatives may be viewed here

This extension for Chart.js facilitates the creation of heat map charts.

Note that library implements a the kind of heap map chart that displays data in a grid and not the more intricate heat map graphic typically used to track mouse or eye movements. See heatmap.js for this type of graphic.

Sample


Installation Instructions

Bower

The Bower package includes Chart.js.

bower install Chart.HeatMap.js
NPM

The NPM package includes Chart.js.

npm install chart.heatmap.js
Other

Chart.HeatMap may be downloaded here: Download

You may also view the repository directly at GitHub

Usage

Chart.HeatMap has both a standalone and plug-in version, with an S in the filename of the standalone version to distinguish it. Be sure to use the version of Chart.HeatMap.js that is in the dst/ directory of the original repo or bower package.

Javascript
var ctx = document.getElementById('heatmap').getContext('2d');
var newChart = new Chart(ctx).HeatMap(data, options);
Example Standalone HTML
<script src="dst/Chart.HeatMap.S.js"></script>

...
      
<canvas id="heatmap" width="800" height="400"></canvas>
      
Example Plugin HTML
<script src="Chart.Core.js"></script>
<script src="dst/Chart.HeatMap.js"></script>

...

<canvas id="heatmap" width="800" height="400"></canvas>
      

Data Structure

var data = {
  labels = ['0h','1h','2h','3h','4h','5h','6h','7h','8h','9h','10h','11h'],
  datasets = [
    {
      label: 'Monday',
      data: [8, 6, 5, 7, 9, 8, 1, 6, 3, 3, 8, 7]
    },
    {
      label: 'Tuesday',
      data: [6, 8, 5, 6, 5, 5, 7, 0, 0, 3, 0, 7]
    },
    {
      label: 'Wednesday',
      data: [8, 5, 6, 4, 2, 2, 3, 0, 2, 0, 10, 8]
    },
    {
      label: 'Thursday',
      data: [4, 0, 7, 4, 6, 3, 2, 4, 2, 10, 8, 2]
    },
    {
      label: 'Friday',
      data: [1, 0, 0, 7, 0, 4, 1, 3, 4, 5, 1, 10]
    }
  ]
};

The data structure should include labels for the x-axis, as well as the array of datasets with corresponding y-axis labels. Data in the datasets should be of the same length.

Options

The following options are configurable in Chart.HeatMap.

// String - background color for graph
backgroundColor: '#fff',

// Boolean - whether each box in the dataset is outlined
stroke: false,

// Number - width of the outline stroke.
strokePerc: 0.05,

// String - the outline stroke color.
strokeColor: "rgb(128,128,128)",

// String - the outline stroke highlight color.
highlightStrokeColor: "rgb(192,192,192)",

// Boolean - whether to draw the heat map boxes with rounded corners
rounded: true,

// Number - the radius (as a percentage of size) of the rounded corners
roundedRadius: 0.1,

// Number - padding between heat map boxes (as a percentage of box size)
paddingScale: 0.05,

// String - "gradient", "palette"
colorInterpolation: "gradient",

// Array[String] - the colors used for the active color scheme.
// Any number of colors is allowed.
colors: [ "rgba(220,220,220,0.9)", "rgba(151,187,205,0.9)"],

// Boolean - whether boxes change color on hover.
colorHighlight: true, 

// Number - a floating point value which specifies how much lighter or
// darker a color becomes when hovered, where 1 is no change, 
// 0.9 is slightly darker, and 1.1 is slightly lighter.
colorHighlightMultiplier: 0.92,

// Boolean - Whether to draw labels on the boxes
showLabels: true, 

// Number - the font size of the label as percentage of box height
labelScale: 0.2,

// String - label font family
labelFontFamily: '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',

// String - label font style
labelFontStyle: "normal",

// String - label font color
labelFontColor: "rgba(0,0,0,0.5)",

// String - tooltipTemplate
tooltipTemplate: "<%= xLabel %> | <%= yLabel %> : <%= value %>",

// String - template for legend generation
legendTemplate : '<div class="<%= name.toLowerCase() %>-legend">'+
        '<span class="<%= name.toLowerCase() %>-legend-text">'+
        '<%= min %>'+
        '</span>'+
        '<% for (var i = min; i <= max; i += (max-min)/6){ %>'+ // change 6 to number of divisions required
        '<span class="<%= name.toLowerCase() %>-legend-box" style="background-color: <%= colorManager.getColor(i).color %>;">  </span>'+
        '<% } %>'+
        '<span class="<%= name.toLowerCase() %>-legend-text">'+
        '<%= max %>'+
        '</span>'+
        '</div>'

Unsupported Global Configurations

In addition, most of the global chart configuration options provided by Chart.js, can be configured, with the following exceptions:

  • scaleBeginAtZero is not supported, as it does not make sense in this context.
  • scaleOverride is not supported.
  • multitooltipTemplate is not used.

Supported Methods

The following methods are supported:

addData(valuesArray, label)

Add one value to each dataset, with given label. This will increase the size of the x-axis by one.

removeData()

Remove the first data point, decreasing size of x-axis by one.

addDataset(values, label)

Add a new dataset, with given label. This will increase the size of the y-axis by one.

removeDataset()

Remove the first data point, decreasing size of y-axis by one.

getBoxAtEvent(evt)

Return the box/data point at the given mouse event. This is useful for dashboard style interaction.

canvas.onclick = function(evt){
  var activeBox = chart.getBoxAtEvent(evt);
  console.log(activeBox.value); // value at point
  console.log(activeBox.label); // x-axis label
  console.log(activeBox.datasetLabel); // y-axis label
};

Tooltip Options

The data presented by tooltips can be altered using the tooltipTemplate property. Templates have access to the following variables:

  • xLabel: the x label
  • yLabel: the y label
  • value: the value of the data at the given mouse position

One current limitation of Chart.js is that line breaks cannot occur in tooltips.

Example
. . .

tooltipTemplate: "xLabel: <%= xLabel %> | yLabel: <%= yLabel %> | value: <%= value %>"

. . .
      

Color Schemes

You may specify as many colors as you wish. You may also control the whether an automatic gradient is generated using the parameter colorInterpolation.

...
colors: ['red','green','blue'], // for this example
...
    

"gradient" — a gradient is created from the provided colors.

"palette" — similar to gradient, but without interpolation between colors. Best used with many colors.


Scrolling Charts

Chart.HeatMap has no baked in support for scrolling charts, although this effect can be approximated using overflow-x: scroll with a chart wider than the enclosing div. In this case, chart options should be set to responsive: false, and the size of both the enclosing div and the canvas element must be set explicitly.


Bug Reports, Contributing, etc.

Bug reports may be placed on the Github repository's issue tracker.

At this time, because this is a small project, there is no formal procedure for making contributions. They are welcome.

Feel free to contact thomas.m.royal@gmail.com with any questions.