Jump to content

Hide certain columns on column chart on load


Recommended Posts

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.

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

  • 6 months later...

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);
});
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...