 |
|
ss
Oracle Tips by Burleson |
Charts
There are two
types of charts from HTML DB.
-
:
This is a simple chart provided for in the HTML language. This type
of chart is rendered using HTML table tags.
-
:
This is a more powerful type of chart using the Adobe Scalable
Vector Graphics (SVG) standard.
The HTML DB is limited because it has to be drawn
in the browser using HTML table tags as mentioned. Therefore, only a
bar chart can be created with HTML table tags. However, SVG chart
provides several options such as Bar, Stacked Bar, Line, Pie, and Dial
charts.
For the examples, the CONFERENCE_RSVP table will
be used. The scenario is the promoters of the conference would like
to see a chart on how many people made donations. Of those donating,
they would like to see how many paid by which payment type.
Creating a Page with a
Chart
The explanation is done in tutorial fashion. Two
charts will be created on a single page.
1.
Navigate to the Application home page for the Easy HTML DB Book
application.
2.
Click the Create Page button.
3.
Choose the Chart option and click Next.
4.
Choose the Bar (HTML) option and click Next.
5.
On the Page Attributes page:
6.
No tabs and click Next.
7.
On the Chart Definition page:
8.
Click Finish.
Run the page to see the chart in action. There
will be links next the bars that can be clicked on.
select 'f?p=102:11:&SESSION.::::P11_PAYMENT:'
|| payment l,
NVL( payment, 'No Donation' ) payment, count(*) c
from conference_rsvp
group by payment
The query in ch10_5.sql assumes that when the
CONFERENCE_RSVP application was created, it had an application ID of
102. If it is different, it will be necessary to modify the query
accordingly. The URL links being created here are going to navigate
back to the report page created in an earlier chapter. It is going to
set the session state for the P11_PAYMENT page item to the value the
user clicks on and filter the results of the report.
Creating a SVG Chart
Navigate to the page definition for page 1134.
1.
Click on the Create region icon.
2.
Choose the Chart option and click Next.
3.
Choose the Pie option and click Next.
4.
On the Display Attributes page enter SVG Pie Chart for the
Title and click Next.
5.
On the Source page, enter the query from above in ch10_5.sql
and click the Create Region button.
The chart may have a default name of Chart 1.
Since the chart building wizard did not allow this to be set during
the creation of the chart, it must be changed. To do this, navigate
to the page definition for page 1134.
1.
Click on the Chart link for the SVG Pie Chart region. This
will navigate to the Chart Attributes tab for the chart.
2.
Enter the text Easy Pie Chart into the Chart Title field.
3.
Scroll down and change the Font Size for the Legend to 12.
4.
Click on Apply Changes.
Run the report. Use of the SVG chart allows users
to click on the pieces in the pie chart to drill down to the
Conference Attendees report, or the text in the chart legend can also
be clicked to access the information.
The above book excerpt is from:
Easy HTML-DB
Oracle Application Express
Create
Dynamic Web Pages with OAE
ISBN 0-9761573-1-4
Michael Cunningham & Kent Crotty
http://www.rampant-books.com/book_2005_2_html_db.htm
|
