Sunday, 15 September 2013

How to create a Dashboard for your Web-based Database Application - Part III

An excerpt from the book Create Rapid Web Applications Using Oracle Application Express - Second Edition

Sales by Product Region: This region is intended to show individual product sale figures using a pie chart. Hovering the mouse pointer over the pie slices display those figures, as illustrated below.

1. Click the Create icon in the Regions section to create a new Region.

2. In the Region page, click on the Chart icon.

3. From Chart Rendering list, select Flash Chart and click the Pie & Doughnut option. In order to view the Flash impact, you need to have Flash Player 9 or above installed on your PC.

4. Click on 3D pie.

5. Enter Sales by Product in Title, select Standard Region - No Padding for Region Template, 30 in Sequence and click the Next button.

6. Select Look6 for Color Scheme, un-check the Show Labels and Show Values boxes, and click Next.

7. Enter the following SQL Query in the Enter SQL Query or PL/SQL function returning a SQL Query box. Click Next.

select null, p.product_name||' [$'||p.list_price||']' product, SUM(oi.quantity * oi.unit_price) sales
from demo_order_items oi, demo_product_info p
where oi.product_id = p.product_id
group by p.product_id, p.product_name, p.list_price
order by p.product_name desc

8. Click the Create Region button.

9. Click the link of the newly created region (Sales by Product) in the Regions section and set the following attributes. The region will be placed on the same row next to the existing one: This Month’s Sales. The next column position (5) will be selected automatically. This region will also span 4 columns from 5-8.

Start New Row: No
Column: Automatic
New Column: Yes
Column Span: 4

10. Click the Chart Attributes tab on the same page to set the following chart attributes:

Chart Width: 300
Chart Height: 180
Animation: Appear

11. Save your changes by clicking the Apply Changes button.  Continue>>>

NOTE:  You can define custom color scheme by adding your own colors to the chart with the help of color picker palette or by adding hex color values. Custom color scheme is used by setting the following two attributes:

Color Scheme: Custom
Custom Colors: 05FA05,#FF0000,#00ABFA,#87FA03,#FF8400,#DBF705,#0857F7,#7700FF,#112E01,#781200

No comments:

Post a Comment