Hide certain columns on column chart on load

[kpcollier]

I have a column chart datapage that has 5 columns. One of the functionalities of these charts is that you can click on the column name from the legend to hide that value from the chart. This lets you compare two or more values without the distractions of the others. If you click on it again, the column pops back up in the chart.

I am trying to make it so only the first two columns are showing on load of the page, with the last 3 columns hidden until the user clicks on the name from the legend. 

Any help is appreciated.

[futurist]

Hi @kpcollier

I came up with a code that unselects some columns once the DataPage opens up (which they can still toggle to be shown anytime):

<script>

document.addEventListener('DataPageReady', function (event) {

var intervalId = window.setInterval(function(){
const legend = document.querySelector("button[aria-label='Show Processing']");

if (legend === null) {
} else {
clearInterval(intervalId);
document.querySelector("button[aria-label='Show Processing']").click()
document.querySelector("button[aria-label='Show Rejected']").click()
}

}, 100);

});

</script>

 

I put the code in the DataPageReady event, and I used a timer/countdown that runs on an interval, because right when the DataPage loads, apparently the buttons (on the legends section that you would have to click to hide the columns) are not recognized right away, hence why I set that up, so that only when the buttons are recognized, then that's when those buttons are clicked by the code so the columns can be hidden.

These are the ones referring to the buttons:

document.querySelector("button[aria-label='Show Processing']").click()
document.querySelector("button[aria-label='Show Rejected']").click()

Make sure to change the "Processing" and "Rejected" to the labels of the buttons you want to be clicked (that corresponds to the column you want to hide). You can add in as much buttons as you want.

 

Notice how I only used one of the buttons on the:

const legend = document.querySelector("button[aria-label='Show Processing']");

since that is just used to look out for when the buttons finally show up, i only looked out for one button, because once that button shows up, the same goes for the rest. Hope that makes sense!

 

URL: https://c1hch576.caspio.com/dp/db26a0008aee0bbac0b147679ca6

 

 

[kpcollier]

This worked great! Very much appreciated, @futurist.

[futurist]

Hi, sharing in here a script that I found that allows you to check if an element exists (followed by your code if that element in fact exists) instead of using a timer:

 

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

 

 

 

 

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});