APEX ships with many different chart types. To use them in your application, you just select the chart type you like from the Flash Chart wizard. Oracle licenses these chart types from AnyChart, so you can use them freely anywhere in APEX. The following main- and subchart types are natively available in APEX 4.0 by using the wizard:
• Column
• 3D Column
• 3D Range Column
• 3D Stacked Column
• 3D Stacked Column (Percent)
• 2D Column
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
• 3D Stacked Bar Chart (Percent)
• 2D Bar Chart
• 2D Range Bar Chart
• 2D Stacked Bar Chart
• 2D Stacked Bar Chart (Percent)
• Pie & Doughnut
If there is a chart type you want to use, but you don’t see it listed above (for example, a bubble chart), then you can get a separate license from AnyChart or you can buy AnyChart for APEX, which gives you a license to use any chart type you like. Figure 2-33 gives an overview of the chart types that come with APEX (most of them are available in 2D and 3D) on the left-hand side and, on the right-hand side, the extra chart types that are available in the AnyChart for APEX Integration Kit. APEX Evangelists partnered with AnyChart to create an AnyChart Integration Kit for APEX, which provides you with a license for all available AnyChart 5.1 chart types. APEX plug-ins can also be used to integrate these
different charts into your application. More details and pricing information on the AnyChart Integration Kit for APEX can be found at http://anychart.apex-evangelists.com.
Figure 2-33. Comparison of the out-of-the-box charts in APEX with all available AnyChart charts
Behind the Scenes
As we have seen in the “Understanding the Chart Region” section, Oracle APEX generates the HTML to call the AnyChart Flash object which is located in #IMAGE_PREFIX#flashchart/anychart_5/swf/
(#IMAGE_PREFIX# is usually /i/). Most charts will use OracleAnyChart.swf. When Oracle APEX generates the call to the specific AnyChart object it also passes parameters with it. The most important parameter is XMLFile (for example, #HOST#apex_util.flash?p=&APP_ID.:4:&APP_SESSION.:FLOW_FLASH_CHART5_
R#REGION_ID#) which is actually a call to a procedure called apex_util.flash which has some parameters (Figure 2-34). This procedure is not included in the documentation, so to find the definition of this procedure you have to look in the source code of the package, which you find under the user APEX_040000.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-34. Flash procedure in the apex_util (htmldb_util) package
When calling the AnyChart objects, AnyChart might append various parameters to the XML file.
These parameters are there to influence the behavior of the Flash objects. For example, XMLCallDate is used to make sure every call is unique and the browser is not caching the result. APEX_UTIL is actually a synonym for the HTMLDB_UTIL package. The flash procedure in the apex_util package can accept all these parameters. There is one important parameter called p, which is the URL the AnyChart object has to call back to get the data. The URL in the p parameter includes the application, page, and region so Oracle APEX knows which data (XML) it needs to generate for that specific chart.
More graphically presented, the flow is like that shown in Figure 2-35.
Figure 2-35. Graphical representation of the flow to generate the chart
The following is an explanation of the steps shown in Figure 2-35:
1. User requests a page with a chart, so the browser sends a request to APEX to retrieve the page.
2. APEX handles the request and sends back the HTML for that page which includes the tag to include the Flash file.
3. The browser shows the HTML page and renders the Flash object which will do a request back to APEX to get the data for the chart.
4. APEX retrieves the request and sends back the XML for the data of the chart.
Looking at a real case when a user requests a page that holds a chart:
5. User clicks on tab which does a call with this url:
http://webserver/pls/apex/f?p=40:15:2887089650234857::::: .
6. APEX searches for Application 40, Page 15 (and the Session is
2887089650234857). If you want more information about an Oracle APEX URL, click the Help in Oracle APEX and go to Home Application Builder Concepts
Understanding URL Syntax. APEX will translate the source (Figure 2-36) into HTML (Figure 2-37) and send it back to the browser.
Figure 2-36. Source of Chart Region
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-37. HTML of Chart Region generated by APEX
7. The page is shown in the browser and the AnyChart Flash object will request the data it needs to display. While it’s getting the data you will see a loading animation (Figure 2-38).
Figure 2-38. Rendered HTML and call for data of Flash objects
8. To verify the request, it’s best to use a tool like Firebug (an add-on for Firefox).
As you can see in that tool, the request that is called by the Flash object is GET http://webserver/pls/apex/apex_util.flash?p=40:15:2887089650234857:FLOW _FLASH_CHART5_R23967225268238782_en&XMLCallDate=1299428439349
APEX_UTIL.FLASH. It will, based on the parameters, generate the XML of the
chart. In this case it will look at the Chart Attributes and the Series (Figure 2-39 and Figure 2-40) and generate the XML (Figure 2-41) that the AnyChart Flash object understands. Note that all the tokens were replaced by values defined in the Chart Attributes and the #DATA# token was replaced by the output of the select statement defined in the Series. The generated XML is used by the AnyChart Flash object to draw the chart (Figure 2-42).
Figure 2-39. First part of Chart Attributes
Figure 2-40. Last part of Chart Attributes, which shows the XML APEX will use
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-41. The XML that APEX produced based on the Chart Attributes
Figure 2-42. Chart completely drawn when the XML is retrieved