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.