Create an ADF Gauge Chart inside Table

Home/ADF/Create an ADF Gauge Chart inside Table

How to Create an ADF Gauge Chart inside a table

Gauge is very useful to show a problem in data, say what is my project performance between 0 to 100 or what is an average speed people driving  between 1 to 180. Using gauze, we can display a pointer or indicator points to a value between minimum and maximum threshold limits. The Gauge is used to display single data point.

In this example, we are displaying an ADF gauge chart inside an ADF table. The below ADF table is displayed from employees table in HR schema, and replacing salary field with a Gauge. The gauge displays a RED circle if salary is less than 7000, displays a YELLOW circle if salary is between 7001 to 14000, displays a GREEN circle if salary is above 14000

Red => Salary Bad ($0-7000)

Yellow => Good ($7001-14000)

Green => Excellent (Above 14001)


  •  

ADF Gauze Chart Example

 

1. Create an ADF Fusion Web Application

2. Create EO and VO object of Employee object. (Instruction to create Employee EO & VO Object )

3. Create a JSF page under Web Content

4. Create an ADF table by drag and drop an EmployeeView from data control palette to the JSF page

121916_0002_CreateanADF1 Create an ADF Gauge Chart inside Table

 

5. Remove the Salary field in table because we are replacing the salary with a Gauze chart

 

121916_0002_CreateanADF2 Create an ADF Gauge Chart inside Table

 

 

6. Open the Structure window >> Right click on the table >> Select insert inside table >>  Select Column.This will create an empty column in the table

 

121916_0002_CreateanADF3 Create an ADF Gauge Chart inside Table

 

 

7. Drop Salary into the column and select Gauge

 

121916_0002_CreateanADF4 Create an ADF Gauge Chart inside Table

 

 

7. Select the Status Meter Gauge in the left sidebar, Select Circular Status Meter

 

121916_0002_CreateanADF5 Create an ADF Gauge Chart inside Table

 

 

8. Add the Value parameter which points to Salary field #{row.Salary} , Add GaugeThereshol element to set a maximum value and color. The Gauze is surrounded with PanelgroupLayout for display adjustment. 

 

 

 

9. The final ADF Table will look like below. The Gauze chart in circle format 

 

121916_0002_CreateanADF6 Create an ADF Gauge Chart inside Table

 

 

10. This time,  we display salary field in a Dial Gauze Chart. DialGauze supports many backgrounds.   

 

 

 

 

11. Output of Salary in Dial Gauze

 

121916_0002_CreateanADF7 Create an ADF Gauge Chart inside Table

 

 

12. Same thing, Salary in a Status Meter Gauge

 

 

 

 

13.Output of Status Meter Gauge

 

121916_0002_CreateanADF8 Create an ADF Gauge Chart inside Table

 

 

govindan Create an ADF Gauge Chart inside Table
Connect me

Govind

Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
govindan Create an ADF Gauge Chart inside Table
Connect me
By | 2016-12-18T19:26:35+00:00 December 18th, 2016|Categories: ADF|Tags: , , , , |0 Comments
Like us on Facebook.
Connect!