In this article you will learn about how to create a Crosstab Heat map using Helical Insight.
A crosstab heatmap is a great way to compare multiple variables or measure using color. In Helical Insight, using Adhoc when a cross tab report is created by the business user or other user the default view will be:
The above crosstab shows the total travel expense for the journey like from Agra to Lucknow total expense is ($6000). If you want you can add another column showing number of travel. For, applying a heat map you will require a script.
Script
hi_container.set("postExecution", function(){
function Interpolate(start, end, steps, count) {
var s = start,
e = end,
final = s + (((e - s) / steps) * count);
return Math.floor(final);
}
function Color(_r, _g, _b) {
var r, g, b;
var setColors = function(_r, _g, _b) {
r = _r;
g = _g;
b = _b;
};
setColors(_r, _g, _b);
this.getColors = function() {
var colors = {
r: r,
g: g,
b: b
};
return colors;
};
}
function checker(table){
var valArr = [];
var cellData;
var val;
[].forEach.call(table.rows, function(row, i){
if (i===0)
return;
[].forEach.call(row.cells, function(cell, i){
cellData = cell.innerHTML.replace(/,/g , "");
val = parseInt(cellData);
if(!isNaN(val))
valArr.push(val);
valArr.sort(function(a, b){return a-b});
});
});
[].forEach.call(table.rows, function(row, i){
if (i===0)
return;
[].forEach.call(row.cells, function(cell, i){
red = new Color(255, 0, 0),
white = new Color(255, 255, 255),
start = white,
end = red;
cellData = cell.innerHTML.replace(/,/g , "");
val = parseInt(cellData);
var count = 2+valArr.indexOf(val);
var startColors = start.getColors(),
endColors = end.getColors();
var r = Interpolate(startColors.r, endColors.r, valArr.length, count);
var g = Interpolate(startColors.g, endColors.g, valArr.length, count);
var b = Interpolate(startColors.b, endColors.b, valArr.length, count);
if(!isNaN(val))
cell.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
});
});
};
var table = document.querySelectorAll(".table");
[].forEach.call(table, checker);
});
On applying the script the output will be :
Also, you can apply other cross tab combination for more visualization.
For more info, reach out to us at demo@helicalinsight.com