One dashboard background and many charts

On a dashboard I have been developing, I wanted to have one large background image and have all of the charts displayed on that background. This turned out not to be as easy as I thought. Actually, the solution is easy, but finding details on exactly how to do it was not. So, I thought it would be useful to share how I ended up meeting the requirement.

First, I selected a background image. In my case it is a map of the world and it is a dark blue image. Using a photo editor, I manipulated the image to be subtle and to achieve the effect I wanted. Then, I needed to load the image so I can use it. To make things easy, I just uploaded the image in Shared Components => Images. Alternatively, I could have uploaded to the /i/ directory.

Next, I created my "main" region.  This is an HTML region with nothing in the source. To the region header I added the following in order to display the image:

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="left"
background = "#WORKSPACE_IMAGES#bkg_image.gif">
<tr height="1000px" align="left" valign="top">
<td>

So, now I have my large background image on which to place my various dashboard charts.

Next, I started to create my charts. In my case, I didn't want to use a chart region as it gave me a box look with a title etc.  I wanted my charts to look like they were floating on the background. So, I created a chart and set the region type to "No Template". But there was still a problem. Every time I created a chart, even with "No Template" the chart had it own white background. I could change the background to a solid or gradient colour, but that is not what I wanted. I wanted the large background image to be the background and have my chart background to be transparent. In other words, the chart lines or bars sit on top of the background image.

Here's what to do. Create the chart and get it working and looking exactly as you want. In my case I had to set the font colour for the labels and title to something like #AAAAAA because my background is dark.

Once you have the chart created, do the following:

1.  Open the chart definition.
2.  Click on the Chart XML tab.
3.  Set "Use Custom XML" to Yes.
4.  The XML code will display so that you can edit it.
5.  In the XML you will find an empty tag that looks like this:

<data_plot_background>

</data_plot_background>

It will be an empty tag if you have not selected a background for the chart.

You want to edit this section. In may case, I changed it to be:

<data_plot_background>
        <fill type="Solid" color="0xffffff" opacity="0" />
        <border enabled="false"/>
 </data_plot_background>

6.  Apply Changes.

Now, display the chart as a "child" region of the region that you created for your background image.

The actual data area of the chart will now be transparent and your background image will show through. The chart will appear to be floating on your background. The labels, chart title and legend will also appear to be on top of your background image.

I am not sure that the XML I have provied is the best way to do it.... but it works!

The result is a dashboard with a single background image and charts that lay on top of that image.

Why bother to blog about Apex?

For a long time I have been thinking about blogging about Apex. Some of my colleagues had asked when I was going to start blogging. I guess it always seemed to me that maintaining a blog would be quite a commitment and very time consuming. On this point, I am not wrong.

But, there is another side to the story. As an Apex developer, I have used blogs extensively to solve problems, discover new ways of doing things and to learn about new functionality. Almost every day I read an Apex blog of some sort and learn something new. I have relied heavily on blogsaj and found them to be a critical resource.

So, if I use blogs for learning, how can I sit back and not contribute to the community and share those things that I myself am learning.

And, there is another reason I have started to blog. I am an Apex enthusiast and where I live  and consult (South Africa), there is still limited use of Application Express. This is because there is a limited development community here that is using and promoting Apex. What better way to promote the tool than to become involved in sharing information about its capabilities.

So, to blog or not to blog? The answer seems clear..... and here I am.

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.