Color Heatmap

[intapiuser]

Version: 1.4

Disclaimer

Use the download Link for L2023.7 or newer. For older versions of Sisense, use the other attached version of the ColorHeatmap plugin

Introduction

This article explains how to install and configure the Color Heatmap widget as seen below. 

A heat map (or heatmap) is a graphical representation of data where the individual values contained in a matrix are represented as colors 

Purpose/Benefits

Use heatmap’s to represent relationship between 2 dimensions. The below example demonstrate the relationship between s Sale Person to the Categories he sold:

How to Install and Configure the Extension

Step 1 - Add The Plugin

Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Now, when you create a new widget the "Color Heatmap" widget should show up in the list of options.

Step 2 - Create the "Color Heatmap" Widget

On your dashboard, click the Create Widget button and select Advanced Configuration. Next, select the "Color Heatmap" from the drop down list. For this you will need to specify the X-Axis and Y-Axis dimension, and Values.  

 For the below example, we have added the following:  X-Axis from “Full Name”, Y-Axis from “Category Name” and Values from Total Sales.

As a result, the above Color Heatmap created a matrix of Sale Person to Category showing the Total Sales for each square with its associated color.

The widget also offers the following design options:

1. Legend Position– sets the position for the legend (Top, Bottom, Left or Right)
2. X-Axis Position– sets the position of the X-Axis labels (Top or Bottom)
3. Y-Axis Position - sets the position of the X-Axis labels (Left or Right)
4. Click on cell set filters– when on, clicking on a specific cell will automatically set dashboard filter to the values of X-Axis and Y-Axis

---------

Sort by Day of week solution: 

In order to change the order of the x or y-axis for "Day of Week" Name to show as Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday is this order please use the below solution:

Step 1:
Change the x/y axis to numeric field - "Day of Week Number"

Step 2:
Use the below script on the widget:

var list = {
'1': 'Sunday',
'2': 'Monday',
'3': 'Tuesday',
'4': 'Wednesday',
'5': 'Thursday',
'6': 'Friday',
'7': 'Saturday'
}
widget.on('ready',function(scope){
var item = '[widgetid="' + scope.oid + '"]'
var lmnts
if (prism.$ngscope.appstate === "widget") {
lmnts = $('.highcharts-xaxis-labels').find('tspan')
} else {
lmnts = $(item).find('.highcharts-xaxis-labels').find('tspan')
}
for (var i=0; i<lmnts.length; i++) {
if ($(lmnts[i]).text() && list[$(lmnts[i]).text()]) {
$(lmnts[i]).text(list[$(lmnts[i]).text()])
$(lmnts[i]).parent()[0].setAttribute("transform", "translate(0, 0) rotate(0)")
}
}
});

References/Notes

• The Heatmap will not render more then 100,000 points

[Ponchia]

Hello  @intapiuser and @slosada!
The link to download the plugin is not reachable. Is there any other source where we can find the library?
Or will it be possible to update the link?

Thanks, Zeno

I'm on the latest SiSense-hosted version (2023.9, Linux); I tried loading the older plugin version (that link is working), but I can't select it has a widget type in that case, and older widgets made with that plugin do not work.

[DRay]

Hello @Ponchia,

Thank you for reaching out! Can you try the V1.4 download that we just added and let us know if that works?

Thank you.