Jump to content

Charts: Reverse X-Axis


Recommended Posts

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.image.thumb.png.e5bc2da89c64a67ec580bcb7e242a377.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 6 months later...
<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.

Link to comment
Share on other sites

  • 3 months later...
  • 9 months later...
  • 8 months later...
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);
});
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...