Change the background color in Pivot Chart

[alexmshcare]

Does anyone know a formula or a way to set up a logic in Caspio for the condition below?

If the car is **Available**, the background color will turn green,

If the car is **Service**, the background color will turn red,

If the car is **Office Based**,the background color will turn orange,

if the criteria above were not met, the background will remain in white color

I would appreciate all suggestions. 

Thank you.

Alex

 

 

Edited September 5, 2022 by alexmshcare

[CoopperBackpack]

Hello @alexmshcare,

If you need to apply the background color to all the fields on your Pivot table except the first field, please teat the following code.

Add the Footer element, disable the HTML editor on the Advanced tab before pasting the code, and paste this code into the Footer:

<script>
    document.addEventListener('DataPageReady', colorHandler);

    function colorHandler() {

        const pivotFields = document.querySelectorAll('td:not(td:nth-child(1))'); 

        pivotFields.forEach(cell => {
         if (cell.innerHTML === '**Available**') {
                cell.style.backgroundColor = '#66c66d';
            } 
         else if (cell.innerHTML === '**Service**') {
                cell.style.backgroundColor = '#ff5a4b';
            } 
         else if (cell.innerHTML === '**Office Based**') {
                cell.style.backgroundColor = '#ff9b3c';
            } 
        });

  document.removeEventListener('DataPageReady', colorHandler);

};
</script>

 

You may change the HEX color codes in the code above.

This is the result I received:

 

Hope this helps.

Feel free to update this thread if you need further assistance with a solution. 

[autonumber]

Hello! Just to add with the response, you may also refer to the links below: 

https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/