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, chart will show corresponding calculated values in Y-Axis. (The X-axis won't change)
-
Create a bar/column/line/are chart
-
Widget should contain only one category(dimension). You can create as many Values panels as required and enable only one panel. The script will generate one button per Value panel and will be able to switch between panels by clicking on buttons.
-
Add below script to widget
widget.on('processresult', function(se, ev){
ev.result.chart.marginTop= 60
});
widget.on("domready", function(w){
chart = w.chart[0][Object.keys(w.chart[0])[0]].hc
$.each(w.metadata.panels[1].items, function(index, value){
chart.renderer.button(value.jaql.title, 10 + (index * 70), 10)
.attr({
zIndex : 10,
height: 15,
width: 50,
'text-align': 'center'
})
.on('click', function() {
value.disable = false
$.each(w.metadata.panels[1].items, function(itemIndex, itemValue){
if(itemIndex == index)
itemValue.disabled = false
else
itemValue.disabled = true
})
widget.refresh();
})
.add();
})
});Refer: https://www.binextlevel.com/post/switchable-measure-buttons
If there are more buttons in your widget, there may not be enough space to display all buttons. In that case you can use dropdown instead of buttons. Here is a script for it. Here the dropdown is using some basic styles. It is possible to update the style easily within the script.
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();
});
});
Refer - https://www.binextlevel.com/post/switchable-measure-dropdown
-Hari
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
