Saturday 25 June 2011

Complex Dashboard in Apex

I have been spending time lately developing what has turned out to be a very complex dashboard in Apex. The dashboard has somewhere around twenty different dynamic flash charts on it, most of which have user-defined parameters.

At first, it seemed simple enough. I developed the graphs and the user input fields. One by one the graphs were tested and worked. However, when it was all put together, I was not at all happy. The charts took quite a while to load, and randomly some of the charts would start to load but never render.

After quite a bit of playing around and investigation, I discovered some things that I should have thought about from the start. Firstly, every time the page renders, the charts have to build their data set. The more complex the data and the more series involved, the longer it will take for the chart to render. Also, when there are user defined parameters associated with the data set, the chart will sometimes fail entirely.

Now, to find a solution.  I first deiced that it would be best to have less charts immediately render when the page is launched and allow the user to select what charts they want to see. To accomplish this, I used the parent / child region feature in Apex. I created several parent regions each based on a chart category. Next, I place "child" regions with charts (no template) inside each of the parent regions. To control the display, I created a checkbox list in the page sidebar. When the user selects the checkbox associated with the region, the charts are rendered. This was a great solution because the charts only render if the region is shown thus improving the overall performance. I even allowed the user to save their "dashboard settings" so that the dashboard would always first load using their "checkbox" settings. In a later blog I will wlak through all of the steps to do exactly this.

Now, what about those pesky data sets?  After quire a bit of investigation on the forum and elsewhere, I came to understand that if I could take the task of data generation away from the flash chart itself and make it as simple as possible, the faster the chart would load and the more manageable would be the user-defined paramets. Collections is the answer!

For charts that required a larger amount of data with multiple series, I created a collection on page load. It is not rocket science. Generally the collection must end up have the same query format as the chart itself:

select null link,
         <something> value
from ....
where....

As long as you can successfully  build the collection, the chart can then reference the collection rather than having to build its own data set:

select c001 link,
         to_numcer(c002) value
from apex_collections
where collectin_name = <your collection>
and ....

You will be amazed as to how quickly the chart will render. Bam!  It is displayed!

To make performance even better, I only load up my collections once on the initial page load. The data is available already for all subsequent loads. The collections have already been populated so there is not data fetch required.

The final result is a very slick dashboard that renders very quickly and puts the user in control of what they see and when they see it. No matter how complicated the chart - the rendering is quick and slick.

No comments:

Post a Comment