Transcript EGL/JSF Chart Components

®
IBM Software Group
JSF Chart Components
This Learning Module shows how to create dynamically-constructed run-time Charts
and Graphs that are bound to server-side EGL data
© 2006 IBM Corporation
EGL/JSF Chart Components
 Many web applications present statistical data in graphical (chart) format. For example:
 Display customers and their orders
 With customers represented on the X (horizontal) axis
 And Order Amounts on the Y (vertical) axis
 This is relatively simple with JSF and EGL. So simple in fact, we will do two charts: Order_Amounts by
Customer, and # of orders by customer.
Last update: 12/04/2007
2
 EGL/JSF Chart Components
 Create a new web page named: dataGraph.jsp – use a template
 Add an HTML Table: 2 Rows/1 Column: Width 100%
 Specify each table cell to Align horizontally Center
 Drag an Enhanced Faces Component: Chart
into each of the table cells
 Edit the EGL for the Page
 Replace the default boilerplate with the code
in the Notes section of this slide
 Press Ctrl/S to save
Note that all we need for data access is the raw
Table rows.
Alternatively, we could use SQL Column Statistics
(MAX/SUM/AVG/etc.) – or even do the data analysis
in EGL (by manipulating the arrays), but for this
example we’ll let the charting software take care of it!
Last update: 12/04/2007
3
 Customize the Order Amount Chart
 From Page Data – drag and drop the orders array on top of the top Image component. From
Properties set the following:
 Specify basic properties
Graph properties
- Display Options - Specify the following titles:
- X-axis Values - Select: CustomerID
- Y-axis Values - Click Add Series – specify the Value, Series Name, Group Operations and Format
Last update: 12/04/2007
4
 Customize the Number of Orders Chart
 From Page Data – drag and drop the orders array on top of the bottom Image
component. From Properties set the following:
 Specify basic properties
Graph properties
- Display Options - Specify the following titles:
- X-axis Values - Select: CustomerID
- Y-axis Values - Click Add Series – specify the Value, Series Name, Group Operations and
Format
Last update: 12/04/2007
5
 Run the Chart Page
 Run the page on the server
 Try the mouse-over
 Pretty neat 
Last update: 12/04/2007
6