Customizing the XML is one way to get more out of charts, but sometimes even that is not enough and you need to take an extra step. To illustrate this we will look at the use case where the manager of the previous example now wants to see which employees brought in a lot of sales, who performed well, and who did not. She could just look at the chart and do the math in her head, but giving colors to the columns (Good = green, Normal = yellow, Bad = red) would make the job easier (Figure 2-62). It would mean we define thresholds, sales numbers below a certain number (red), between numbers (yellow) and over a certain number (green).
Figure 2-62. Column chart with custom XML and Dynamic Action to show thresholds
These are the steps to create a chart with thresholds:
1. Create a normal 2D column chart based on the following SQL statement:
SELECT NULL LINK, ENAME LABEL, SAL VALUE FROM EMP ORDER BY ENAME
2. Click right in the Tree view on the region and select Edit Chart. It will open the Chart Attributes.
3. Navigate to the bottom of the page and set the dropdown for Use Custom XML to Yes. That will make the Custom XML text area editable. Note that the settings of the chart disappear and you now have to manually adapt the XML to make changes to the chart (Figure 2-60).
4. The AnyChart XML Reference documentation (Figure 2-63) tells us we can use a threshold node (<threshold>). The following code needs to be added just after the </data_plot_settings> node (and before #DATA#):
<thresholds>
<threshold name="sales_threshold">
<condition name="Bad" type="lessThan" value_1="{%Value}" value_2="1500" color="Red"/>
<condition name="Normal" type="between" value_1="{%Value}" value_2="1500" value_3="2500"
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
color="Yellow"/>
<condition name="Good" type="greaterThan" value_1="{%Value}" value_2="2500"
color="Green"/>
</threshold>
</thresholds>
5. If you run the page now with the custom XML you don’t see any difference, which is because the data node also needs to take the threshold into account.
Now this isn’t as straightforward as you might think. If you look at the XML you will find a #DATA# token that gets replaced on the fly by Oracle APEX based on the series. The SQL statement of the series gets translated into the correct XML. APEX doesn’t support the threshold tag out-of-the-box, so you need to generate the correct XML so the thresholds are included manually.
6. Create a Hidden Item on the page (right-click the chart region – Create Page Item – Hidden) and call it P18_CHART_XML (because we are on page 18). You will use this item to store the data part of the chart.
7. In the Custom XML, replace #DATA# with &P18_CHART_XML. (note the . at the end), where P18_CHART_XML is the hidden page item. That item you will fill with the correct XML.
8. To fill P18_CHART_XML with the XML, add an Advanced Dynamic Action to the page which generates the XML. Use the XMLDB feature of the database, which lets you create a select statement that generates XML. The Dynamic Action looks like this:
• Event: Page Load
• True Action: Execute PL/SQL Code declare
l_xml clob;
begin
SELECT xmlelement("data", xmlattributes('sales_threshold' AS "threshold"),
xmlelement("series", xmlattributes('Series 1' AS "name"), xmlagg(
xmlelement("point",xmlattributes(ename AS "name", sal AS "y") ) ))).getClobVal() INTO l_xml
FROM emp;
:P18_CHART_XML := wwv_flow_utilities.clob_to_varchar2(l_xml);
end;
• Page Items to Submit: P18_CHART_XML
9. If you want to add the Legend of the Thresholds you have to make another small change to the XML in Use Custom XML. You have to tell the legend the source is now thresholds instead of the items. Search for legend (only visible when you defined Show Legend before you set Use Custom XML) and change it to the following code. If you don’t find the legend node, add it after the
</axes> node.
<legend enabled="true" position="Bottom" align="Near" elements_layout="Horizontal"
ignore_auto_item="true" >
<title enabled="true">
<text>Legend</text>
<font family="Arial" size="10" color="0x000000" />
</title>
<font family="Arial" size="10" color="0x000000" />
<items><item source="thresholds"/></items>
</legend>
Saving the chart and running the APEX page should give you the result shown in Figure 2-62.
If you have Asynchronous Update set to Yes, you will also need to change the Region and replace
#CHART_REFRESH# with some custom JavaScript; instead of calling APEX’s procedure to refresh the data, it needs to call your own. One way of doing that is by copying the Dynamic Action and assigning it to the change event of P18_CHART_XML.
• Right-click the Dynamic Action – Copy
• Event: Change
• Selection Type: Item(s)
• Item(s): P18_CHART_XML
• Click the Copy Dynamic Action button
In the JavaScript you would trigger the change event on that item, so the Dynamic Action fires.
Following JavaScript code does that:
apex_RefreshFlashChart (&APP_PAGE_ID., chartName, 'en-us');
$('#P18_CHART_XML').trigger('change');
To get it working, replace the #CHART_REFRESH# token you find in the Region Definition of the chart by the above JavaScript.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-63. AnyChart XML Reference documentation—thresholds node