How to apply a background image to a chart

[hoffmandirt]

How do you apply a background image to a Splunk chart? I can set a background color for the chart using CSS, but not an image. When the chart loads, it covers up the background image with the default background color (white) of the chart or the CSS background color that I configured. I can see a small portion of the background image under the chart.

I tried setting the background image by modifying the following CSS classes: FlashChart and FlashWrapperContainer. Also tried using the IDs of the elements that these classes are assigned to.

I see that the object tag that is rendered has the wmode and bgcolor properties. Can I edit the view XML to change these?

<object width="100%" height="100%" type="application/x-shockwave-flash" id="swfObject_FlashChart_0_2_0" name="swfObject_FlashChart_0_2_0" data="/en-US/static/@82143.12/flash/charting.swf">
    <param name="wmode" value="opaque">
    <param name="bgcolor" value="#ffffff">
    <param name="flashvars" value="basePath=/en-US/splunkd">
</object>

---

I modified the FlashWrapper module to accept wmode as a parameter. It appears that transparent charts are not possible as of version 4.1.5.

[IT_Bullgod]

If you can see some of your image just before the chart loads, but is then obscured when the chart renders - you've likely placed the image in the wrong background class. While it's not completely intuitive, there's a distinction between the "dashboard background" and the "dashboard cell background". Here are the two stanzas from application.css:

/* dashboard background color */
body.splTemplate-dashboard {
background-image:url(image_file_that_gets_obscured.png);
}
/* dashboard containers */
.dashboardCell {
background-image:url(the_real_image.png);
}

If you're certain the background image file is in the right place, you can try moving these stanzas to the bottom of the file while you debug the CSS. Sometimes there are other stanzas taking precedence which are difficult to see.

Also, you should do your debugging with Firefox, and the FireBug plug-in. It makes tracking down the CSS classnames much easier.