on - edited on by
Liliia_DevX
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
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:
- Legend Position– sets the position for the legend (Top, Bottom, Left or Right)
- X-Axis Position– sets the position of the X-Axis labels (Top or Bottom)
- Y-Axis Position - sets the position of the X-Axis labels (Left or Right)
- 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"
Change the x/y axis to numeric field - "Day of Week Number"
Step 2:
Use the below script on the widget:
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)")
}
}
});
'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
