Color Heatmap
Download: Color Heatmap
Version: 1.4
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:
- 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"
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
Release Notes
- 22-Mar-2018– Initial release
- 08-May-2018 - hide data labels as they are shown by default after 7.1 release
- 09-May-2018 - increase the HighChart threshold to handle up to 100,000 points instead of the default 1,000
- 07-Sep-2018
- Fix export to PDF where widget is not showing on the report
- Add the ability to set conditional coloring on the value parameter
- Fix issue where dashboard filers are not being taking into account
- Highlight selection items based on dashboard filters - 20-Sep-2018
- Fix getting an error message when widget is not returning any result
-
Comment actions
-
Hi Ronen,
First of all thanks for bringing this chart type. This is the chart type we were looking for a while.
I downloaded this plugin to my system, but when I am trying to create a widget by using this chart type it is showing some error stating "Error Querying Elastic Cube". Can you please help how can I get rid of this error.
I am attaching the screenshot.
Best regards,
Ravi
-
Seeing something odd when using in version 7.1. There are values posted in the cells (which could be good), but they could use some styling to make them more readable (in the .css file in the plugin?). Also, the axes aren't being sorted correctly. It's mostly correct, but there are occasional out of place values on the y-axis (see image).
-
Also I added my previous change for pdfs and allowed you to change the color scheme via the sidebar. Can these be added so I don't have to worry about missing new features. https://drive.google.com/file/d/1sS4EFfABrSlA7EQ_ndBeXGa01Baxu6ns/view?usp=sharing
Thanks!
-
Hi,
This plugin is very interesting. Could you make a few improvements so that we can be in a better position to leverage it?
- It would be very useful to have the color configuration capabilities on the Value field, similarly to what we have for treemaps and calendar heatmaps. (I see Rourke Rabinowitz on the previous post implemented this in his forked version)
- It would be essential for dashboard filters to push down to the widget. For some reason this doesn't appear to work, the widget simply ignores the dashboard filters (I'm using 7.1.3 for testing)
Thanks for the good work!
-
It seems like this widget doesn't really handle No Results well. I have it implemented and functioning in a dashboard. It works great until I add a combination of filters such that it yields no results. At that point, I get the yellow square that says "This shouldn't have happened. Please ask your administrator for assistance," rather than the more graceful "No Results" message.
-
Hi Ronen,
I really like this plug-in. It gives us new insights on our data.
It's seems like we found a bug in this plug-in, though.
We use scheduled reports. These scheduled reports all fail when the plug-in is active. When we disable the plug-in these scheduled reports are been send successfully again.
We're running Version: 7.2.0.12014
Hope that you can find this bug.
-
One other point with this widget. If you set the coloring to be conditional, rather than the range default, the legend doesn't really update accordingly.
Here I have everything lower than 0.9 pink and everything above 0.9 green, but the legend still shows a gradient. If this couldn't be fixed, it would still be a good workaround to enable hiding the legend.
-
Hi Ronan,
We love the plugin, but we seem to be having some compatibility issues with IE. when the plugin is enabled, all the hidden _drill dashboards become visible, and the jump-to plugin stops working. we are also seeing some indicator widgets showing wrong numbers.
This does not happen on Chrome.
Any help would be appreciated.
Rob.
-
Hello, I want to know if we can change the order of the x and y-axis, currently I am using dates and showing editing the formatt to show as Mon, Tue, Wed, Thu, Fri, Sat, Sun, however, the order is incorrect, how can I reorder this? The order seems to change as I change my date range. Any help on this or if there could be a a update to the plugin would be really great to have.
Thanks!
-
I ended up downgrading to a previous version of the plugin in order to sidestep the IE problems. When I did, I found that pdf export works, but throws a highcharts error. I elected to just catch this error, though I know that's not great practice.
render: function (widget, event) {
try {
console.log('render');
var element = $(event.element),
svgHeight = $(element).height(),
svgWidth = $(element).width();
element.empty();var num = Math.floor(Math.random() * 1000000);
var MyDiv = element[0],
ObjectID = widget.oid,
ChartDivName = "colorheatmap-" + ObjectID + "-" + num;MyDiv.setAttribute("id", ChartDivName);
MyDiv.setAttribute("style", "width: 99%; height: 99%; margin: 0 auto");//element.append('<div style="width=97% height=97% margin: 0 auto" id="' + ChartDivName + '"></div>');
DisplayColorHeatmap
(
widget,
ChartDivName,
svgWidth,
svgHeight
);
} catch(e) {
}
}, -
Hi, thanks for the solution to the ordering of the days, it worked well.
I have an issue with the plugin in that the tooltip (the little box that comes up when you hover on the cell) does not always match up to the value I put in, specifically the name of the value, instead it uses the name of another heatmap widget I made just above it. When I expand the widget, either as a viewer or as an admin to edit it, the problem goes away for that widget, but then it the name in the tooltip is wrong in the other heatmap widget.
a second issue is that when I change the value to a percentage, the legend remains as a decimal.
please could you help me with those above issues?
Thank you,
Dilshad
in widget.js
Please sign in to leave a comment.
Comments
34 comments