San Francisco

Oracle Open World 2008

Advanced Charting in Application Express

© Dimitri Gielis – Apex Evangelists

 Who I am

• Co-founder of Apex Evangelists

• Used Oracle since version 7
• Oracle Consultant for over 4 years
• Vice President of the IOUG APEX SIG
• Creator of the ‘famous’ WC 2006 app
and DG Tournament

• ‘Dimitri.Gielis@AE’ in the Application Express forums

• Presenter at IOUG, ODTUG, OOW, UKOUG, …
• OCP 8i/9i/10g
http://www.dgtournament.com
http://www.apexblogs.info
 Audience Knowledge

• Who’s using APEX 3.1?

• Who knows charts in APEX?

• Goals
– Explanation of Charts in APEX

• Non-Goals
– Know all types of charts
 Purpose of this presentation

• Why do charting
• How to create and customize a chart
in APEX
• Insights into APEX charts
• Live demos
• Charting beyond APEX
WHY
 Why using Charts?

• More and more people prefer to have a

graphical representation about their data
• A picture shows more than thousand words
HOW
 Creating a Flash Chart (1)

Create a Flash Chart region

 Creating a Flash Chart (2)

Specify the chart type... a lot of choice!

BET

24 -
How many different charts are
there in the wizard in APEX
3.1?
 Creating a Flash Chart (3)

Customize the chart with

• a title
• an animation
• color
• X and Y axis titles
• hints, labels and values
• a legend and a grid

20
 Creating a Flash Chart (4)

Add a Series to get data in the chart:

• SQL Query
• PL/SQL function returning a SQL Query
 Creating a Flash Chart (5)

Run the page

 Create & Customize a Chart (6)

Live Demo
?
 How Charts work in APEX (1)

Charts in APEX

• Based on Anychart 3
• Anychart 4 in Interactive Reports (APEX 3.1)

Remark: Anychart 5 is already out

 How Charts work in APEX (2)

Charts in APEX

• Exists out of 2 parts:

• swf-file (Flash file)
• data in xml format
 How Charts work in APEX (3)

Understanding the code (swf-file in HTML)

<object
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"




codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
width="600"
swflash.cab#version=6,0,0,0"

height="400"



width="600"
id="c805338521098862158"



align="">
height="400"
<param name="movie" value="/i/flashchart/Stacked2DColumn.swf?XMLFile=http://apex-evangelists.com/pls/apex/apex_util.flash?

id="c805338521098862158"
p=1100:5:121584562325720:FLOW_FLASH_CHART_R805338521098862158_en-us">

<param
align="">
name="quality" value="high">
<param
<param name="movie" value="/i/flashchart/Stacked2DColumn.swf?XMLFile=http://apex-
name="allowScriptAccess" value="sameDomain">
<param name="allowNetworking" value="all">
evangelists.com/pls/apex/apex_util.flash?
<param name="scale" value="noscale">
p=1100:5:121584562325720:FLOW_FLASH_CHART_R805338521098862158_en-us">
<param name="wmode" value="transparent">
<param
<param name="quality"
name="FlashVars" value="high">data. Please wait.&loading=Loading data...">
value="waiting=Loading
<embed
<param
<embed src="/i/flashchart/Stacked2DColumn.swf?XMLFile=http://apex-evangelists.com/pls/apex/
name="allowScriptAccess" value="sameDomain">
src="/i/flashchart/Stacked2DColumn.swf?XMLFile=http://apex-evangelists.com/pls/apex/apex_util.flash?
p=1100:5:121584562325720:FLOW_FLASH_CHART_R805338521098862158_en-us"
apex_util.flash?p=1100:5:121584562325720:FLOW_FLASH_CHART_R805338521098862158_en-us"
<param name="allowNetworking" value="all">
quality="high"
<param quality="high"
name="scale" value="noscale">
width="600"
<param width="600"
name="wmode" value="transparent">
height="400"
name="c805338521098862158"
<paramheight="400"
name="FlashVars" value="waiting=Loading data. Please wait.&loading=Loading data...">
<embedscale="noscale"
name="c805338521098862158"
src="/i/flashchart/Stacked2DColumn.swf?XMLFile=http://apex-evangelists.com/pls/apex/apex_util.flash?
align=""
p=1100:5:121584562325720:FLOW_FLASH_CHART_R805338521098862158_en-us"
scale="noscale"
allowScriptAccess="sameDomain"
quality="high"
align=""
allowNetworking="all"
width="600"
type="application/x-shockwave-flash"
allowScriptAccess="sameDomain"
height="400"
pluginspage="http://www.macromedia.com/go/getflashplayer"
name="c805338521098862158"
allowNetworking="all"
wmode="transparent"
scale="noscale"
type="application/x-shockwave-flash"
FlashVars="waiting=Loading
align="" data. Please wait.&loading=Loading data...">
</embed> pluginspage="http://www.macromedia.com/go/getflashplayer"
allowScriptAccess="sameDomain"
</object>
<script
wmode="transparent"
allowNetworking="all"
type="text/javascript" language="javascript">
type="application/x-shockwave-flash"
FlashVars="waiting=Loading data. Please wait.&loading=Loading data...">
function chart_r805338521098862158_InitRefresh(pNow) {
pluginspage="http://www.macromedia.com/go/getflashplayer"
</embed>
setTimeout("chart_r805338521098862158_InitRefresh(true)",10000);
wmode="transparent"
if (pNow){apex_RefreshChart
</object> (5,data.
FlashVars="waiting=Loading '805338521098862158', 'en-us');} data...">
Please wait.&loading=Loading
}
<script
</embed>type="text/javascript" language="javascript"> 20
apex_SWFFormFix('c805338521098862158');
function chart_r805338521098862158_InitRefresh(pNow) {
</object>
</script>
setTimeout("chart_r805338521098862158_InitRefresh(true)",10000);
<script type="text/javascript" language="javascript">
if (pNow){apex RefreshChart (5, '805338521098862158', 'en-us');}
 How Charts work in APEX (4)

Understanding the code (xml data)

 How Charts work in APEX (5)

To see the xml data

• Go to url:
http:/host/pls/apex/apex_util.flash?p=APP_ID:PAGE:SESSION:FLOW_FLASH_CHART_R..._en-us

• XML tree exists out of

• Type: describes the chart type and how the chart
needs to look like inside
• Data: contains blocks of data that will be used to draw
the chart

• Tip: A complete XML reference for the Flash Charting Component can be
found on the Anychart website
 How Charts work in APEX (6)

Live Demo
Getting more out of Charts
Drill-down chart and report
Adapt the scale

Maximum
Minimum
Dynamic
Multiple series into one
Add copyright and logo
Make it more secure
Ask any question
 Getting more out of Charts

Live Demo
• Make a drill-down chart and report
• Adapt the scale (max, min, dynamical)
• Change multiple series into one
• Add a copyright text and include a logo
• Make it more secure
• Ask any question
Getting more out of Charts
 Other Hints and Tips

There’re also other 3rd party charting facilities

• Anychart / AnyMap / AnyGantt

• Fusion Charts / Fusion Gadgets
• Maani XML/SWF Charts
• Google Maps (demo in DG Tournament)
 Need More?

First public announcement...

Apex Evangelists will provide

an upgrade kit to Anychart
version 5 for APEX 3.1
 Summary

– How is Anychart integrated into Oracle

Application Express
– How to create a Flash chart in APEX
– How to enhance it
– How to get more out of the charting

34
 Questions and Answers

Q&
A 35
 Thank you

• Please hand in Evaluation Form

– Session
• #xxx
– Speaker
• Dimitri Gielis
– Title
• Advanced Charting in APEX
– Blog & Website
• http://dgielis.blogspot.com 36
 References
• More information
– Websites
• Oracle Application Express Homepage: http://apex.oracle.com
• Anychart website: http://www.anychart.com/home/
• Fusion Charts: http://www.fusioncharts.com/
• Fusion Gadgets: http://www.fusioncharts.com/gadgets/Gallery.asp
• Maani XML/SWF Charts: http://www.maani.us/xml_charts/
• Google Maps: http://maps.google.com

– Email
• dimitri.gielis@apex-evangelists.com

– Blog
• http://dgielis.blogspot.com

– Apex Evangelists (AE)

• http://www.apex-evangelists.com
37