Reversing Dynamically the Sort Order in Column Chart DataPages

2 minutes to read

In some applications, such as sales tracking, project management, and order management, users may need to sort values in charts to easily analyze reports in a dashboard. In this article, we will guide you on how to add a custom button to dynamically sort values in the column chart DataPage. This can also be applied to other chart DataPages.

Steps:

Edit your column chart DataPage.
Add a Header and Footer in the Configure Chart Options screen of the DataPage wizard.
Disable the HTML Editor in the Header section.
Copy and paste the following code in the Header section:
Disable the HTML Editor in the Footer section.
Copy and paste the following code in the Footer section:
Save the DataPage.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<button id="button" class="cbSubmitButton" type="button" onclick="toggle()">Reverse Sort Order</button>

code2

<script type="text/javascript">
function toggle() {
var x = document.getElementById("button");
if (x.innerHTML === "Reverse Sort Order") {
setChart(true);
x.innerHTML = "Back to Default Sort Order"
} else {
x.innerHTML = "Reverse Sort Order";
setChart(false);
}
}
function setChart(result){
Highcharts.charts[0].update({ xAxis:{ reversed: result }});
}
</script>