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

Question

I am updating an old data visualization module that used the Google Graphics Card API . Now we move on to the new (er) visualization API , which uses JavaScript to generate dynamic diagrams in the browser within the specified <div> container.

We need to present a chart with a background image (for branding purposes). However, the only thing I was able to accomplish, given the configuration options in the API description , was to change the background color.

If I paste the background image into the <div> into which the chart is inserted, the chart (obviously) just overlays it.

Do I have a problem with JavaScript or HTML5 that I am completely unaware of?

(I'm a little new to JavaScript to thank you for what could actually be a trivial or obviously impossible problem!)

Answer 1

You might want to wrap the chart target element with another and change the parent background to the desired image, removing the child's background.

e.g. 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 the chart settings in JavaScript

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

Here I will give an example http://jsfiddle.net/jaimem/jaxfz/

Answer 2

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

You can do this by 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 diagram documentation and comments this stack overflow question