Display Logarithmic Filter

[gwolfe]

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? 

[DRay]

Hello @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-i...

I hope that helps. Please let me know if you have any additional questions.

Have a terrific Tuesday!

[gwolfe · Accepted solution]

Hey 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]

Thank you for following up. That's a great solution!