The following demo shows an example of using heatmaps for the values in tha grid's columns.
Changing the values in the grid automatically recalculates the font color for the whole column, thereby updating a heatmap.
The dynamic color scale calculation is done using the excellent Chroma.js.
var data = [
[2002, 190251, 5090, 195341],
[2003, 224495, 6486, 230981],
[2004, 254044, 6765, 260809],
[2005, 254099, 7521, 261620],
[2006, 271108, 9449, 280557],
[2007, 280565, 11714, 292279],
[2008, 284120, 11292, 295412],
[2009, 279742, 11468, 291210],
[2010, 290411, 11806, 302217],
[2011, 290652, 10891, 301543],
[2012, 283863, 10402, 294265],
[2013, 267646, 10104, 255850]
],
container = document.getElementById('example1'),
lastChange = null,
heatmap,
heatmapScale,
hot;
heatmapScale = chroma.scale(['#17F556', '#ED6D47']);
hot = new Handsontable(container,{
data: data,
colHeaders: ["Year", "Domestic Flights", "International Flights", "Total Flights"],
columns: [
{
type: 'numeric'
},
{
type: 'numeric',
format: '0,0',
renderer: heatmapRenderer
},
{
type: 'numeric',
format: '0,0',
renderer: heatmapRenderer
},
{
type: 'numeric',
format: '0,0',
renderer: heatmapRenderer
},
],
afterLoadData: updateHeatmap,
beforeChangeRender: updateHeatmap
});
function updateHeatmap(change, source) {
if (change) {
heatmap[change[0][1]] = generateHeatmapData.call(this, change[0][1]);
} else {
heatmap = [];
for(var i = 1, colCount = this.countCols(); i < colCount ; i++) {
heatmap[i] = generateHeatmapData.call(this, i);
}
}
}
function point(min, max, value) {
return (value - min) / (max - min);
}
function generateHeatmapData(colId) {
var values = this.getDataAtCol(colId);
return {
min: Math.min.apply(null, values),
max: Math.max.apply(null, values)
};
}
function heatmapRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (heatmap[col]) {
td.style.backgroundColor = heatmapScale(point(heatmap[col].min, heatmap[col].max, parseInt(value, 10))).hex();
td.style.textAlign = 'right';
td.style.fontWeight = 'bold';
}
}