How to place background image in google chart

Question

I need to place a background image on Google Chart. I have seen solutions that involve including a chart in the parent div and setting a background image for the parent div. However, if I do this, the background image will also cover an area outside the diagram where axis labels, legend, etc. will be displayed. I only want my image in the chart area.

Alternatively, is there a way to get chart parameters so that I can use chartArea.top, chartArea.left, chartArea.width and chartArea.height to overlay the image on the chart in the right place?

Thanks a lot Chris

Answer 1

You can get information about where you draw the chart as follows:

var graph = new google.visualization.LineChart(...); graph.draw(data, ...); var boundingBox = graph.getChartLayoutInterface().getChartAreaBoundingBox(); var pixelsFromLeft = boundingBox.left; 

You can then use this information to draw the div in the correct position.

Answer 2

To contribute to Sjoerd's answer, the full code might look like this:

In Html, as jaime suggested in this question :

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

In css, as suggested in the same answer:

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

In javascript using the Sjoerd clause:

 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 also written using an example in google chart documentation and my answer to this question