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.
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.
var ctx = document.getElementById('heatmap').getContext('2d');
var newChart = new Chart(ctx).HeatMap(data, options);
<script src="dst/Chart.HeatMap.S.js"></script>
...
<canvas id="heatmap" width="800" height="400"></canvas>
<script src="Chart.Core.js"></script>
<script src="dst/Chart.HeatMap.js"></script>
...
<canvas id="heatmap" width="800" height="400"></canvas>
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.
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>'
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.The following methods are supported:
Add one value to each dataset, with given label. This will increase the size of the x-axis by one.
Remove the first data point, decreasing size of x-axis by one.
Add a new dataset, with given label. This will increase the size of the y-axis by one.
Remove the first data point, decreasing size of y-axis by one.
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
};
The data presented by tooltips can be altered using the tooltipTemplate property.
Templates have access to the following variables:
xLabel: the x labelyLabel: the y labelvalue: the value of the data at the given mouse positionOne current limitation of Chart.js is that line breaks cannot occur in tooltips.
. . .
tooltipTemplate: "xLabel: <%= xLabel %> | yLabel: <%= yLabel %> | value: <%= value %>"
. . .
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.
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 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.