html - How can I hack a background image into Google Chart Tools' dynamic (JavaScriptSVG) chart? - Stack Overflow

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 acplish, 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!)

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 acplish, 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!)

• javascript
• html
• google-visualization

Share Improve this question Follow asked Jan 11, 2012 at 23:11 msanfordmsanford 12.3k1313 gold badges7171 silver badges9898 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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/jaimem/jaxfz/

Just in case someone has the same problem as me, you can also fix the background to the chart only, and not the entire div (which will add background to the title, axis, etc.)

You can do this doing something like this:

In Html, as jaime suggested:

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

In css, as jaime suggested:

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

In javascript:

google.charts.load("current", {packages:["corechart"]});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['ID', 'X', 'Y', 'Temperature'],
     ['',   80,  167,      120],
     ['',   79,  136,      130],
     ['',   78,  184,      50],
     ['',   72,  278,      230],
     ['',   81,  200,      210],
     ['',   72,  170,      100],
     ['',   68,  477,      80]
   ]);

   var options = {
     colorAxis: {colors: ['yellow', 'red']},
     width: 450,
     height: 300,
     title: 'My Daily Activities',
     backgroundColor: 'none' // this is important!
   };

   var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
   chart.draw(data, options);

   // this two lines are the ones that do the magic
   var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox(); 
   $('#brand_div').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
}

All this code was written using jaime's suggestion, google chart's documentation and the ments on this stack overflow question