Switchable Measure Buttons
Here is a script to add buttons to switch between different measures/calculation.
For example, in below screenshot, each button represent different calculations and when we click on it, ch...
Forum Discussion
Hi Hari,
This is great stuff! Thank you for sharing!
Few notes worth knowing about the topic of switching measurements:
Use with Caution
- The script is based on the renderer class of the highcharts library that many of Sisense's charts are based on.
- This means that if it's not working on a specific chart type like treemap, sunburst and etc' then it won't work.
- Also note that Sisense is using a fairly old version of the highcarths library so there are a few outstanding legacy issues with this feature that might occur from time to time.
- Using this feature of highcharts is a great approach but should be used with proper caution and you should properly test this script on your different widgets as in some layouts and screen sizes those issues would be detected.
Other Free Alternatives
A few great materials/scripts/plugins that should be reviewed that would get assist you in doing similar things but in different ways:
Changing Measures In The Entire Dashboard Using Blox User Interface
Generally speaking, if you looking for a free alternative and don't mind doing some scripting work, we would recommend going with the BloX alternative as this approach is officially supported by Sisense.
As switching measurements is an extremely popular request and therefore would be used in a large number of widget instances and dashboards - you should wrap this script as a plugin or use our premium Widget Script Manager plugin instead.
It's an amazing plugin that allows you to manage all your widget scripts in one centralized place and choose where and how they would be triggered by using a smart triggering engine.
* It also comes bundled with 50+ (supported) common script samples to expedite your scripting work and Financial formatting over Pivots (and other widget types) is one of them
Advanced Measure Changer (premium alternative)
We developed a great premium plugin named Advanced Measure Changer which allows you to easily add buttons, dropdowns, and other UI elements to all widget types and manage their options in one centralized place without using any scripts or code.
Feel free to reach out of you have further questions, we're always happy to help (:
Hi Paldi,
Thank you for the feedback!
You are right, similar to 'The Measure Changer Widget' and 'Advanced Measure Changer' plugins, the script won't work with treemap, sunburst etc. And I didn't know that there are outstanding legacy issues with highchart buttons and thanks for informing about it. I tested the script many times and I couldn't find out any. I would appreciate if you could share some more insights about the issue.
Updated Script
Here is an updated script which is not using highchart buttons. Instead it is using HTML select list (dropdown) which lists available measures in the widget. Since it is dropdown list it won't take much space and it is visible even if you reduce the screen size. Also it is easy to change the style of dropdown in script.
(I updated the same script in original post as well)
widget.on('processresult', function(se, ev){
ev.result.chart.spacing = [20, 20, 77, 20 ]
});
widget.on("domready", function(w){
chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
var buttonList = new Array(w.metadata.panels[1].items.length)
chartContainer = $('.highcharts-container', element)
dropdownHTML = `<select style="padding: 5px 10px; background:#FFFFFF; border: 1px solid #c0c1c2; margin:2px 5px;" name="select" id="select-${w.oid}"></select>`
chartContainer.before(dropdownHTML)
$.each(w.metadata.panels[1].items, function(index, value){
$(`#select-${w.oid}`).append(`<option value="Item${index}">${value.jaql.title}</option>`)
})
chartContainer.height(chartContainer.height() - 77);
selecteIndex = w.metadata.panels[1].items.findIndex(el=>el.disabled == false)
document.getElementById(`select-${widget.oid}`).value = 'Item' + selecteIndex
var select = document.getElementById(`select-${widget.oid}`);
select.addEventListener('change', (e) => {
var selectedPanelIndex = parseInt(e.target.value.replace('Item', ''))
$.each(w.metadata.panels[1].items, function(itemIndex, itemValue){
if(itemIndex == selectedPanelIndex)
itemValue.disabled = false
else
itemValue.disabled = true
})
widget.refresh();
});
});
-Hari
