Based on Oracle Application Express (formerly called HTML DB) version 1.5
After completing this How-To, you should be able to understand:
HTML DB supports charts using Scalable Vector Graphics (SVG). SVG is a new XML-based language for vector based graphics from the World Wide Web Consortium (W3C). (For more information about SVG, please visit the W3C SVG Web Site). HTML DB generates SVG charts dynamically based on a SQL Query. In this How To, we will describe how you can use a table supplied with the sample application to generate an SVG chart and enable that chart to drill down to a report.
* SVG Charts are currently only supported by the Adobe SVG plugin available for Internet Explorer.
We will extend the Sample Application that is included when a new workspace is provisioned. To create an SVG chart, we will use the SVG Chart wizard.
select null link,
p.category label,
count(p.category) value
from demo_product_info p,
demo_order_items i
where p.product_id = i.product_id
group by null, p.category
order by p.category
* HTML DB uses the following SQL query syntax to generate an SVG chart:
SELECT LINK, LABEL, VALUE
FROM ...
Where LINK is a URL, LABEL is the text that displays in the legend, and VALUE is the numeric column that defines the chart element.
Figure 1 - Ordered Product Categories SVG Chart
To create a report, please go through the steps outlined in the "How To" Dynamic Query Report. We will use this page to link from SVG chart.
Now that the report is created, we will change the chart query to make the SVG chart drill down to the report. You should have created a dynamic query report on page 600 using the Dynamic Query Report How To. It generates the report dynamically based on the value of an item called P600_SHOW, allowing the user to constrain the report to show rows for individual product categories. Rather than having the user select a category using a select list, we will modify the pie chart to link to the report and set the category to display. To change the chart query to incorporate the assignment of a category value to the P600_SHOW item, follow these steps:
Figure2 - Edit SVG Chart
select 'f?p='|| :APP_ID ||':600:'|| :APP_SESSION ||'::::P600_SHOW:'||p.category link,
p.category,
count(p.category)
from demo_product_info p,
demo_order_items i
where p.product_id = i.product_id
group by null, p.category
order by p.category
After adding a link to the chart query, you should be able to drill to the detail report by clicking on a slice in the pie chart, or on the corresponding category in the chart legend.
Discuss this how-to in the OTN HTML DB Forum.