Databases Reference
In-Depth Information
Behind the Scenes
The reason HTML charts render so quickly becomes clear when you look behind the scenes. As the name
states, HTML charts render straight HTML. Basically, a table gets rendered with a couple of columns
(
<td>
tags).
Inside these
<td>
tags there is a one-by-one pixel image rendered, with a specific height and width,
calculated by APEX based on the results of the query, so the image looks bigger.
You can see a part of the HTML code for the first chart:
<table class="standardLook">
<tbody>
<tr><td align="center" colspan="10"></td></tr>
<tr>
<td valign="bottom">
<img src="/i/blue.gif" alt="Business Shirt - 50" width="40" height="67" style=
"border-left:1px #ffffff solid; border-top:1px #ffffff solid; border-right:1px #000000
solid; border-bottom:1px #000000 solid;">
</td>
<td valign="bottom">
<img src="/i/green.gif" alt="Trousers - 80" width="40" height="107" style=
"border-left:1px #ffffff solid; border-top:1px #ffffff solid; border-right:1px #000000
solid; border-bottom:1px #000000 solid;">
</td>
Inline HTML Charts in Report
The technique that was used to generate the bar, using a 1
1 pixel image (the color varies depending on
which image is used) with a custom width and height and a style attached to it, might be useful in other
parts of your Oracle APEX project—for example, if you want to have an inline chart in your report to
represent a percentage or if you want to show how much has already been consumed of a total.
In APEX itself you find this method used in a couple of other places as well, for example, in
Administration
Monitor Activity
Application Changes by Day (Figure 2-4).
Figure 2-4.
Graph inline in Application Changes by Day report
The method APEX uses in the HTML chart could be even a bit more performant if it always used the
same image instead of using a different image by color. The image would need to be a transparent 1
1
pixel image that has a style attached to it to give it the color you selected. Obviously we are talking about
very small gains, but the browser would have to do only one request for the one transparent image,
whereas now it has to do multiple requests depending on the number of different colors you have.
One of the attributes of the chart is the color; if you go with just one color instead of “random
colors”, the performance would be the same as with the transparent image.
