Geek Answers Handbook

Google charts transparent background not working

I am trying to make the background transparent for some of the charts that I made with google charts. They work great in everything except IE7 and 8, I get a white backgound.

I tried every combination that I can find for the color attribute to change it, but nothing works.

The only thing to try was to assume that someone did here a few months ago for someone else with the same problem. Their offer was ...

For transparent background use chf = bg, s, FFFFFF00

But I have no idea how to implement this?

+4
source share
2 answers

= CHF BG, s, FFFFFF00

is the code for old google maps .

These codes will only work with chart versions other than SVG. Google graphic art graphs are outdated (as you can see from their help pages ), so if you don’t want to implement the old diagrams, you won won’t be able to implement the above code on your new, fantastic interactive SVG graphs.

For the new fantastic SVG charts, I got lucky with

backgroundColor: "transparent"

Copy this into the Google Playground to check:

 <!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], ['2003', 1336060, 400361, 1001582, 997974], ['2004', 1538156, 366849, 1119450, 941795], ['2005', 1576579, 440514, 993360, 930593], ['2006', 1600652, 434552, 1004163, 897127], ['2007', 1968113, 393032, 979198, 1080887], ['2008', 1901067, 517206, 916965, 1056036] ]); // Create and draw the visualization. new google.visualization.BarChart(document.getElementById('visualization')). draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, vAxis: {title: "Year"}, hAxis: {title: "Cups"}, backgroundColor: "transparent"} ); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA"> <div id="visualization" style="width: 600px; height: 400px;"></div> </body> </html>

This is an example of a standard chart with two things added:

  • bgcolor = "# E6E6FA" to the body element (turn it blue so we can tell if it is transparent)
  • backgroundColor = "transparent" for the parameters (make it transparent)

This works in Firefox. I do not know if it works in IE7 (no test environment). Let us know if this works.

+13
source

modify the configuration file that contains the pie chart accordingly. I had this diagram under donate.php as an example:

WITH

 $chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&amp;cht=p&amp;chd=t:'.$percent.',-'.(100-$percent).'&amp;chs=200x200&amp;chco=639600&amp;chp=1.57';

TO

 $chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&amp;cht=p&amp;chd=t:'.$percent.',-'.(100-$percent).'&amp;chs=200x200&amp;chco=639600&amp;chp=1.57';

this code allows me to have transparency when it was a white background! thanks.

+1
source

More articles:


All Articles