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:
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.
<button id="button" class="cbSubmitButton" type="button" onclick="toggle()">Reverse Sort Order</button>
<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>
Caspio is the world’s leading cloud platform for building online database applications without coding.
Start a free trial today and experience the power of no-code.
© 2025 Caspio, Inc. Sunnyvale, California. All rights reserved.