This example is completely different from previous examples and takes us beyond APEX. In this example, the manager wants to know how well his products have sold, broken down by state, and how many products every salesperson has sold. The manager also wants drill-down capabilities so that if he clicks on a state he can see how the products sold for only that state (Figure 2-70).
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-70. A complex dashboard using the full AnyChart capabilities
This example hardly uses any built-in features of APEX. The only thing you need is an HTML region where you define the <div> tag that holds the dashboard and a dynamic action to load the data for the dashboard (Figure 2-71). Unlike in the previous examples, this dashboard only consists of one Flash object, but inside that one Flash object three different charts are defined. The first one is a map, the second one a 2D bar chart, and the third one a 2D column chart.
Figure 2-71. Behind the scenes of the complex dashboard The definition of the HTML Region is
<div id="chartDiv"></div>
And this is how the Dynamic Action is defined:
• Event: Page Load
• True Actions
• Action 1:
• Action: Execute JavaScript Code
• Fire When Event Result is: True
• Fire On Page Load: No
• Code:
chart = new AnyChart('#IMAGE_PREFIX#flashchart/anychart_5/swf/OracleAnyChart.swf',
'#IMAGE_PREFIX#flashchart/anychart_5/swf/Preloader.swf');
chart.width = 800;
chart.height = 500;
chart.setXMLFile('#OWNER#.GET_DASHBOARD_XML_PRC?p_param1=Full');
chart.write('chartDiv');
As you can see, there is almost no complex structure to the page. The Dynamic Action runs on Page Load and will create a chart in the <div> tag. The only magic piece in the JavaScript is the call to
setXMLFile which gets the XML for the chart. In this case we didn’t use a hidden item to store the XML as that would give a problem for large datasets (more than 32K). Assigning a value to a page item is limited to 32K, but because the dashboard we want to create is based on three different charts, passing the information for all three charts will exceed that 32K limit. The setXMLFile calls a procedure on the server called GET_DASHBOARD_XML_PRC. The #OWNER# will get replaced by the default parsing schema defined in your workspace. The procedure has two parameters to pass extra information to the chart or change behavior based on the user interaction, but there is another parameter called XMLCallDate which you need to include because AnyChart is attaching extra parameters to the call. XMLCallDate is used by
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
AnyChart to make sure every call is unique, otherwise the browser might cache the result and you might get incorrect results. You don’t have to do anything special for that—AnyChart handles everything for you. You just need to make sure you accept these extra parameters in your procedure. The procedure looks like this:
create or replace procedure get_dashboard_xml_prc(
p_param1 varchar2 default null, XMLCallDate IN NUMBER DEFAULT NULL) is
-- limit of 32K in single byte characterset, for UTF8 devide by 4 -1 l_amt number default 8191;
l_offset number default 1;
l_length number default 0;
l_chart clob;
l_chart_v varchar2(32767);
l_chart_data clob;
begin
dbms_lob.createtemporary( l_chart, FALSE, dbms_lob.session );
dbms_lob.open( l_chart, dbms_lob.lob_readwrite );
<chart plot_type="Map" name="mapChart">
<chart_settings>
<controls>
<label inside_dataplot="True" position="Bottom" align="Near"
text_align="Center">
<text>Click on a state to see sales splitted by Products and Sales Representatives</text>
<legend enabled="True" ignore_auto_item="True" inside_dataplot="True"
rows_padding="0" align="Far">
<data_plot_settings enable_3d_mode="False">
<map_series source="usa/country/states_48.amap">
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
<threshold name="thrSales" type="Quantiles" range_count="5"
palette="salesPalette" />
{%ADAM_SALES}{enabled:False}</replace>
<replace token="{$brentSales}">
{%BRENT_SALES}{enabled:False}</replace>
</action>
</actions>';
dbms_lob.writeappend( l_chart, length(l_chart_v), l_chart_v);
select xmlagg( xmlelement("point", xmlattributes(p.c1 as "name", p.c2 as "y"),
(select xmlelement("attributes", xmlagg( xmlelement("attribute", xmlattributes
(t.c3 as "name"), t.c4)))
<chart plot_type="CategorizedHorizontal" name="productsChart">
<chart_settings>
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
<chart plot_type="CategorizedVertical" name="personsChart">
<chart_settings>
<format>${%Value}{numDecimals:1,scale:(1000)|(k)}</format>
dbms_lob.writeappend( l_chart, length(l_chart_v), l_chart_v);
dbms_lob.close( l_chart );
dbms_lob.freetemporary(l_chart);
end if;
end;
When you look at this code for the first time it might look challenging, but it comes down to generating the correct XML that AnyChart requires to render a dashboard. You would need to look into the AnyChart Gallery and Documentation to know what XML is expected.
In this case we hardcode many things—for example, the title and the persons—but you can make this procedure as dynamic as you like by using more parameters or building more queries to retrieve the data. Because there is a limit in htp.prn, you have to write a loop to pass the XML back in chunks. The look and feel of the chart in the above example is defined by a string, the data is retrieved from the salespp table, and you build the XML using the XML DB feature as we have done in previous examples.
Looking closer into the XML of the dashboard, AnyChart supports interactivity by defining Actions.
We defined an action when a user clicks on the map to refresh the two detail charts of the products and persons. In a dashboard, AnyChart calls them views. So there is only one Flash Object, but because the
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
View type is Dashboard and we defined how these views look, AnyChart will render multiple charts into one.
There are many more options in AnyChart; for example, using specific events to refresh one particular view of the dashboard (setViewData in JavaScript) or letting the chart behave completely differently when the user is hovering over and clicking the chart.
The possibilities are endless and we can’t show every possible feature of AnyChart, but by
understanding how AnyChart works behind the scenes and by looking at the different techniques used throughout this chapter, you should be able to build your dream chart.