Using A Gauge Chart To Display Data Dynamically

Overview

In Oracle APEX, Utilizing a gauge chart is an effective means to dynamically display data in a visually intuitive manner. Gauge charts provide a concise representation of a single metric or data point, typically in the form of a dial or needle on a circular scale. These charts are particularly useful for conveying performance metrics, progress toward a goal, or any data that can be expressed within a range. Employing dynamic data in gauge charts allows for real-time updates, enabling users to instantly grasp changes or trends. This dynamic visualization aids in quick decision-making and enhances the user’s ability to monitor and respond to evolving data scenarios within the context of a single, easily interpretable chart

Technologies and Tools Used

The following technologies has been used to achieve the same.

Oracle APEX

JavaScript

HTML & CSS

Use Case

The gauge chart should dynamically integrate with project management data, such as completion percentages, task statuses, and milestone achievements..

Implement a gauge chart that allows users to set customizable thresholds for project milestones and key performance indicators, enabling them to define acceptable ranges and identify critical points.

Enable real-time updates to the gauge chart based on changes in project data. This ensures that stakeholders have access to the most current information without the need for manual refreshes.

Implement visual alerts within the gauge chart to draw attention to critical data points, such as missed deadlines or deviations from the project plan. This enhances the ability to quickly identify and address issues.

Provide interactivity features, allowing users to click on specific sections of the gauge chart to drill down into detailed project metrics, task breakdowns, or individual team performance.

Architecture

Step1: Navigate to the Shared components Click on Static Workspace Files. Create a file and choose an option. Upload the source code file.

Step2: Create Page and write page name as Display Page In Gauge and go to apperance and select the left side column and Paste the java script file url variables

#WORKSPACE_FILES#jqxcore.js

#WORKSPACE_FILES#jqxdraw.js

#WORKSPACE_FILES#jqxgauge.js

And also CSS File URL

Past the css WORKSPACE_FILES VARIABLE

#WORKSPACE_FILES#jqx.base.css

GO to security part and select the Unrestricted in page action protection…

Step4: Create Region as Gauge Parameters type static select as static content and position to select on the Left Column. For the left side purpose and Region Display Selector Should Be Switch on. And create 7 page items for data handling purpose

Step5: create page as customer type was select list and list of query fetch from database

Code:

select cust_first_name||’ ‘||cust_last_name d, customer_id r

from demo_customers

order by cust_first_name

Others page item are type are text field and default value set like number are fixed for representing the gauge chart inner value denoted ….

Step5:Create a another Region and region name as Gauge Chart type is static content

And used this HTML CODE:

<div id=”gaugeValue”

style=”position: absolute; top: 235px; left: 132px;

font-family:

Sans-Serif; text-align: center;

font-size: 17px;

width: 70px;”>

</div>

Go to Advanced switch on the region display and layout select the Body and Create a page item as ORDER_TOTAL

Source—–>type——>sql query(returning single value)

Code:

select sum(order_total) order_total

from demo_orders o

where customer_id=:P9_CUSTOMER;

Step6: Create Dynamic Action Event as Page Load and true —–>Execute the JavaScript

Code:

$(document).ready(function () {

$(‘#gaugeContainer’).jqxGauge({

ranges: [{ startValue: 1, endValue: $v(“P9_CRITICAL”), style: { fill: ‘#e02629’, stroke: ‘#e02629’ }, endWidth: 5, startWidth: 1 },

{ startValue: $v(“P9_CRITICAL”), endValue: $v(“P9_WARNING”), style: { fill: ‘#fbd109’, stroke: ‘#fbd109’ }, endWidth: 10, startWidth: 5 },

{ startValue: $v(“P9_WARNING”), endValue: $v(“P9_OK”), style: { fill: ‘#4bb648’, stroke: ‘#4bb648’ }, endWidth: 15, startWidth: 10 }],

max:$v(“P9_OK”),

labels: { interval: $v(“P9_LABELS_INTERVAL”) },

ticksMajor: { interval: $v(“P9_MAJOR_INTERVAL”), size: ‘9%’ },

ticksMinor: { interval: $v(“P9_MINOR_INTERVAL”), size: ‘5%’ },

value: 0, // initial pointer position

animationDuration: 1200

});

$(‘#gaugeContainer’).on(‘valueChanging’, function (e) {

$(‘#gaugeValue’).text($v(“P9_ORDER_TOTAL”) + ‘ Amount’);

});

$(‘#gaugeContainer’).jqxGauge(‘value’, $v(“P9_ORDER_TOTAL”));

});

Conclusion

Creating a “Using A Gauge Chart To Display Data Dynamically” leveraging a dynamic gauge chart for displaying data proves to be a valuable asset in enhancing data visualization within applications. The use case of monitoring project progress exemplifies how this graphical representation efficiently communicates key performance indicators, allowing stakeholders to make informed decisions in real-time. The dynamic integration with live project data, customization thresholds, and visual alerts empower users to promptly identify and address critical aspects of their projects. The interactivity features further contribute to a comprehensive understanding of the data, enabling users to delve into specific details effortlessly. Overall, incorporating dynamic gauge charts not only enhances the aesthetics of data representation but significantly improves the usability and responsiveness of applications, promoting better decision-making and facilitating proactive management in various domains.

Screenshots

Javith Hassain Abdul