How can I hack a background image into Google Chart Tools' dynamic (JavaScript/SVG) chart?

Question

I'm updating an older data visualization module which used the Google Image Chart API. Now, we're switching to the new(er) Visualization API, which uses JavaScript to generate dynamic charts in the browser, within a specified <div> container.

We have a need to present the chart with a background image (for branding purposes). However, the only thing I've been able to accomplish, given the configuration options in API reference, is to change the background colour.

If I embed a background image into the <div> the Chart is drawn into, the chart (obviously) just overlays it.

Is there a JavaScript or HTML5 solution to my problem that I'm totally unaware of?

(I'm somewhat new to JavaScript, to thank you for bearing with what may actually be a trivial -- or clearly impossible -- problem!)

Answer 1

You might want to wrap your chart's target element with another one and change the parent's background to the image you want, while removing the background of the child.

for example, HTML

<div id='brand_div'>
    <div id='chart_div'></div>
</div>

and CSS

#brand_div{ 
    background: url(<SOME-URL>) no-repeat;
}

And of course in your chart options in JavaScript

var options = {
    ...
    backgroundColor: 'none'
};

I put an example here http://jsfiddle.net/jaimem/jaxfz/