Charts: Reverse X-Axis

[Altair]

Is it possible to reverse the order of the axis without changing which data points presented? For example, I only want the 5 latest records by Date. When I reverse sort order in Caspio first 5 is shown, I only want to change how the data displayed from left-to-right to right-to-left. I have added red labels on how it should be without going through the Caspio Sort order.

[Nuke354]

You can modify the chart via JS using HighChart attributes, HighCharts is what Caspio use to generate charts.

You just need to add this to your header and footer. (Disable HTML Editor first)

Header:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

Footer:

<script type="text/javascript">

jQuery(window).load(function () {

   Highcharts.charts[0].update({
              xAxis:{ 
                    reversed: false
                    }
        }

    );  
      
});
</script>

You may use this reference as guide on how to manipulate other attributes:
https://api.highcharts.com/highcharts/xAxis.reversed

[Nuke354]

<script type = "text/javascript" >

    var timer = setInterval(function() {
        //Find if chart exists using rect element every x milliseconds
        if ($('rect') != null) {
            //Update Chart
            UpdateChart();
        }
    }, 500);


function UpdateChart() {
    try {

        Highcharts.charts[0].update({
                xAxis: {
                    reversed: false
                }
            }

        );
        //Stop checking
        clearInterval(timer);

    } catch (err) {
        //log errors
    }

}; 
</script>

It seems like the old code is not working for some reason. Here's the new updated code.

[GoodBoy]

Hello! Just to add. Caspio has a new documentation regarding reversing the sort order in charts. 

[IamNatoyThatLovesYou]

Hello Everyone! I tried the following code above and both works. If it seems that it is not being reversed on your end, you can try changing the x-axis to true.

 Highcharts.charts[0].update({
              xAxis:{ 
                    reversed: true

 

[futurist]

On 3/19/2021 at 4:32 PM, Nuke354 said:

<script type = "text/javascript" >

    var timer = setInterval(function() {
        //Find if chart exists using rect element every x milliseconds
        if ($('rect') != null) {
            //Update Chart
            UpdateChart();
        }
    }, 500);


function UpdateChart() {
    try {

        Highcharts.charts[0].update({
                xAxis: {
                    reversed: false
                }
            }

        );
        //Stop checking
        clearInterval(timer);

    } catch (err) {
        //log errors
    }

}; 
</script>

It seems like the old code is not working for some reason. Here's the new updated code.

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 (setInterval):

 

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);
});