Additional Data Chart Tooltip Plugin
Download: Additional Info Tooltip
Introduction
The Additional Data Chart Tooltip Plugin Allows the user to display several values on one column chart and while making it easy on the eye. The purpose is to display several related values in one chart in a simple and easy way.
The Additional Data Chart Tooltip Plugin works on V 5.7. and up.
Example
In this example we choose 4 values and display the third and fourth values as additional info in the tooltip.
This is how the graph looks like before using the plugin:
And this is how the graph looks like after using the plugin:
We narrowed it down to 2 columns. The most important data appears on the graph and the additional info appears info for the two other columns appears in the tooltip while standing on the column. The First value is the value of the column we are standing on and the values below are the values we chose as additional data.
Steps
The Additional Data Chart Tooltip Plugin can be used with Column chart widget only.
In order to add an Additional Data Chart Tooltip Plugin to a chart, please follow the listed steps below:
Step 1:
Download and extract the enclosed folder into the plugins folder:
C:\Program Files\Sisense\PrismWeb\plugins\AdditionalInfoTooltip, if the "plugins" folder is not there, please create it. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder.
Step 2:
Create a Column Chart. in the Values add both the data you want to display in the columns and the data you want to appear as additional data in the tooltip.
Go to the widget editor and edit the widget script
Step 3:
In order to use Additional Info Chart Plugin copy the script below and change the range [2,3] according to the values you wish to display in the tooltip.
prism.additionalInfoTooltip (widget, {seriesIndexes:[2,3],displayCurrentSelection:true});
Code configuration:
The Series Indexes numbers start from 0. The first value location is [0] , the second is [1] etc.
Put the location of the values you wish to display as additional info in the tooltip in the [] and separate them by comma. for example seriesIndexes:[2,3] will display the thirs and fourth values in the tooltip.
The default preferences is to display the values of the column value first and then the additional value. In order to hide current column from the tooltip just change the “displayCurrentSelection” value from true to false.
Press SAVE
Close the Script window
Step 4:
Refresh the Widget and click apply
The chart should appear with the columns chosen and tooltip configuration.
Plugin updated on May 17, 2017
- added support for values formatting
Plugin updated on Sep 18, 2017
- issue with selections don't affect the filter - fixed
Plugin updated on June 06, 2018
- added support for pie chart widgets.
- fixed v 7.1 compatibility issues
-
I have a widget with a column graph of weekly numbers and a running total line graph. I want the line graph to remain displayed with the enhanced tool tip. Additionally, I would love to display the week total, the running total and the percentage of the total vs. running total
-
Hello Joe,
We may achieve this by using the following parameters:
tooltipIndexes - an array of series to display in the tooltip
hideIndexes - an array of series to hideTo implement please use this in the widget script:
prism.additionalInfoTooltip (widget, {tooltipIndexes:[0,1,2],hideIndexes:[1],displayCurrentSelection:false});
Make sure to modify the array parameters.
Then, replace the script in the AdditionlInfoTooltip.js file with the following:
prism.additionalInfoTooltip = function (widget, widgetArgs) {
widget.on("beforeviewloaded", function(e, args){
_.each(widgetArgs.hideIndexes, function(i) {
if (args.options.series.length > i){
args.options.series[i].visible = false;
args.options.series[i].showInLegend = false;
}
});
});widget.on("beforedatapointtooltip", function (se, args){
var category = args.context.pointScope.selectionData[0];
var points = [];if (widgetArgs.displayCurrentSelection){
points = args.context.points;
}
_.each(widgetArgs.tooltipIndexes, function(i) {
var e = args.widget.queryResult.series[i];
for (var j=0; j < e.data.length; ++j){
if (e.data[j].selectionData[0] == category){points.push({seriesName: e.name, showPercentage: false, value: e.data[j].y.toLocaleString(), valueColor: e.data[j].color});
}
}
});args.context.points = points;
});
}; -
Using this with Version 6.5.2.11007, and have an issue where the ability to drill down into the widget is limited to one time per loading of the widget.
- When I drill down, and move back out to the original widget view, I'm unable to select another column or drill down.
- When I select a column, then unselect it, I'm unable to select another column or drill down.
-
This is a useful feature that is frequently requested. I second the queries about getting such capability for additional widget types. Is there any though of doing that?
Also, the presentation formatting choices -- such as $, %, or precision -- are not honored in the tooltip pop-up. Is there any plan to add this?
Thanks!
-
Hi,
We have a column chart with one visible and one hidden column. This widget is set to affect the dashboard filters. WThe first time a user selects a column, the filter updates. A second column selection also works, but the third does not. The column highlights but the filter is not affected and other widgets do not respond. Refreshing the page gives two more selections and again fails on the third.
We're in 6.5 and we have a reasonably recent version of this plug-in, updated with your great fix for the formatting, as discussed above.
Has anyone else seen this?
Thanks,
Leslie
-
Hi,
This a very useful plugin but we have a problem.
Say for I have 13 series in one single column chart but I want to show only 5 series in the chart and rest 8 in additional tool tip
So my 5 values column bars are :
Life Savings - When i hover over this I want to show additional info only for this bar
Annual Savings - When I hover over this bar, I want to show additional info Particular to annual savings
Expenses - same as above only for Expense
$ / Unit Annual - same as above only for $ / Unit Annual
$ / Unit Life - same as above only for $ / Unit Lifeprism.additionalInfoTooltip (widget, {seriesIndexes:[2,3],displayCurrentSelection:true});
But the above script shares for the entire column chart display and I want to restrict based on the different column bar I hover . How can I specify for a specific series what additional information to be shown and another series different set of additional information etc. ?
Please suggest.
Regards,
Sanjoy
-
Hi,
I managed to update this plug-in to allow it to work properly on 2 x-axis bar charts.
https://drive.google.com/file/d/14y9uWRP03aqvvTaa_kAhnXXk220X2BHt/view?usp=sharing
Please sign in to leave a comment.
Comments
37 comments