Debugging Flash Charts is done differently than debugging other components in APEX (for more information on debugging, see Chapter 6). After reading how these Flash Charts work behind the scenes, you know that there are different components and requests going on for a single chart. There is the HTML for the Region of the Chart (Region Template), the HTML to include the AnyChart Flash Object (Region Source), the call for the data (XML) for the chart and the generation of the chart itself.
When you run your page in Debug Mode, you see one line in the debug output for the chart region (Figure 2-43). That gives you an idea how long it took to generate the chart region, but only the HTML part. In the user’s perspective it might be very different, as the Flash object still needs to be called by another process and the XML still has to be generated. Any performance issues are not really seen in the debug output. (In the next two figures, we show more about performance and how to really track how long it took to generate the chart.) But running the page in Debug Mode has another component that is very valuable. In the page itself, next to the chart, a Show XML link will appear. (See Figure 2-44.)
Figure 2-43. Debug information for a Chart
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-44. Extra Show XML link when running the page in Debug Mode
The Show XML link will show the XML output that was generated by APEX for the chart (Figure 2-45). Having this information is really important as the chart you see is defined by this XML. AnyChart has a complete XML reference in their documentation which explains every node. The URL to the AnyChart XML reference can be found in the “Resources” section later in the chapter (Figure 2-46).
Figure 2-45. XML behind the chart after clicking the Show XML link
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
Figure 2-46. XML Reference by AnyChart
To see exactly what is happening in the browser you need to use an external tool, such as Firebug.
Other browsers also have developer tools which can do the same.
The Net Panel in Firefox is most important for seeing what’s going on behind the scenes (Figure 2-47). The main purpose of the Net Panel is to monitor HTTP traffic initiated by a web page and simply present all collected and computed information to the user. Its content is composed of a list of entries where each entry represents one request/response round trip made by the page. You can see the requests, the status, the size of what is returned, and the time it took.
Figure 2-47. The Net Panel in Firebug/Firefox
The first request is the request for the APEX page. The next nine requests are to get some CSS and JavaScript files. The eleventh request is to include the SWF and the last request is the call to
apex_util.flash to retrieve the data (xml).
Hovering over the request shows you the complete URL and clicking on it slides open other options, for example, Params, Headers, and Cache. Clicking on the Params tab shows you all the parameters the URL has. In the case of Figure 2-48 it shows the URL that the AnyChart Flash object
(OracleAnyChart.swf) will call.
Figure 2-48. The Params tab of a request in the Net Panel in Firebug/Firefox
Clicking the Response of the last request, which is calling the Flash procedure in the apex_util package, shows you the XML that Oracle APEX produced based on the settings in Chart Attributes for that chart.
If you have an issue with your chart, the first thing you should check is the response and the XML (Figure 2-49). In 90% of cases there is something awkward going on in the output, which explains why something is not behaving in the chart as you expect. For example, a tag may not be closed correctly, or some special characters can make the XML invalid, or the wrong syntax is used in the XML. Referring to the AnyChart documentation would be the next step to solve your problem.
Figure 2-49. The Response tab of a request in the Net Panel in Firebug/Firefox
If you find that some parts take a long time to load, you can investigate by hovering over the bar and more information will be shown (Figure 2-50).
Figure 2-50. Hovering over the timeline gives more information.
CHAPTER 2 ORACLE APEX 4.0 CHARTS INSIDE OUT
If you need to go even further in debugging and want to actually debug things within Flash, you can download the Flash Player Debug version. There are tools like Flash Tracer for Firebug that integrate nicely with the Flash debug output. In my experience, it is seldom necessary to do this. Usually AnyChart will investigate the issue if you report a bug in the charting engine.
If you encounter performance issues and your charts become slow the first thing you need to look at is the Net Panel in Firebug and check the Timeline. That will tell you exactly where you are losing most of the time. Usually you will find that the last step (the generation of the XML) takes most of the time.
The more series you have, the longer it may take to see the data in the chart. If you can combine multiple series into one, you will gain performance. If you need multiple series it’s best to try them first in SQL Developer or SQL Workshop to see how fast the results arrive. If the query is slow in that
environment, it will be slow in the chart too. (Tuning the SQL statements falls outside the boundaries of this chapter.)