Display Logarithmic Filter
I have a scatter plot and I want the ability to for the user to be able to toggle on and off the "Logarithmic" feature from the design panel. Does anyone know how to make this happen?
Garrett Wolfe
Posted 2 years ago·Last reply 2 years ago
3 comments
DRay
·2 years agoThank you for following up. That's a great solution!
Garrett Wolfe
OP2 years agoHey all, following up. I was able to get some help from BINextLevel.com. See the below 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;
chartContainer = $('.highcharts-container', element);
let currentLogButton = document.getElementById(`log-button-${widget.oid}`);
if(currentLogButton)
currentLogButton.remove();
let currentLinearButton = document.getElementById(`linear-button-${widget.oid}`);
if(currentLinearButton)
currentLinearButton.remove();
logButton = `<button style="width:150px; height:30px; border-radius:15px 0px 0px 15px; cursor:pointer; border: 1px solid gray;" id="log-button-${w.oid}">Logarithmic</button>`
chartContainer.before(logButton)
linearButton = `<button style="width:150px; height:30px;border-radius:0px 15px 15px 0px; cursor:pointer; border: 1px solid gray; " id="linear-button-${w.oid}">Linear</button>`
chartContainer.before(linearButton)
chartContainer.height(chartContainer.height() - 77);
const logStatus = !!w.style.xAxis.logarithmic;
const logButtonSelect = document.getElementById(`log-button-${widget.oid}`);
const linearButtonSelect = document.getElementById(`linear-button-${widget.oid}`);
if (logStatus) {
setButtonActive(logButtonSelect);
setButtonInactive(linearButtonSelect);
} else {
setButtonActive(linearButtonSelect);
setButtonInactive(logButtonSelect);
}
logButtonSelect.addEventListener('click', (e) => {
widget.style.xAxis.logarithmic = true;
widget.refresh();
})
linearButtonSelect.addEventListener('click', (e) => {
widget.style.xAxis.logarithmic = false;
widget.refresh();
})
});
function setButtonActive(element) {
element.style.backgroundColor = '#4960a6';
element.style.color = '#ffffff'
}
function setButtonInactive(element) {
element.style.backgroundColor = '#ffffff';
element.style.color = '#4960a6'
}
DRay
·2 years agoHello gwolfe,
The most straightforward solution is to utilize the Tabber plugin. Alternatively, you can achieve the desired outcome using the BloX plugin. Here are a couple of community posts with similar solutions which can be repurposed.
https://community.sisense.com/t5/knowledge/implement-tabber-in-blox/ta-p/8849
https://community.sisense.com/t5/knowledge/using-blox-buttons-changing-date-granularity-of-widgets-in-a/ta-p/8632
I hope that helps. Please let me know if you have any additional questions.
Have a terrific Tuesday!