Solved

Google Charts API transparent background

Posted on 2011-09-13
3
1,545 Views
Last Modified: 2012-05-12
Hello

I have this code:

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Days'); 
data.addColumn('number', 'Useri'); 
data.addColumn('number', 'Credite'); 
data.addRows(4); 
data.setValue(0, 0, '2004'); 
data.setValue(0, 1, 1000); 
data.setValue(0, 2, 400); 
data.setValue(1, 0, '2005'); 
data.setValue(1, 1, 1170); 
data.setValue(1, 2, 460); 
data.setValue(2, 0, '2006'); 
data.setValue(2, 1, 860); 
data.setValue(2, 2, 580); 
data.setValue(3, 0, '2007'); 
data.setValue(3, 1, 1030); 
data.setValue(3, 2, 540); 

var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
chart.draw(data, {width: 400, height: 240, title: 'Evolutie useri/credite'}); 
} 
</script> 
</head> 

<body style="background-color:#009999"> 
<div id="chart_div"></div> 
</body> 
</html>

Open in new window


This code create a chart. I need to set transparent background and I don't know how to do that.

I read that I need the variable:
chf=bg,s,65432100

Open in new window

but i don't know where or how to add to this code.

Thanks
0
Comment
Question by:radugheorghies
  • 2
3 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36528258
try replacing line 33 by
<div id="chart_div" style="opacity:0.4;filter:alpha(opacity=40);"></div>
0
 

Accepted Solution

by:
radugheorghies earned 0 total points
ID: 36536048
Thanks gurvinder372,

but this solution it is not good. I need a transparent background only in chart, not for graphics.

I fount the solution myself:

<html>
  <head>
   <title> Test </title>
   <script language="javascript" src="http://www.google.com/jsapi"></script>
   </head>
   <body style=" background-color:#6C9">

   <div id="chart"></div>

   <script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(7);

          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.setValue(0, 0, 20);
          dataTable.setValue(0, 1, 5);
          dataTable.setValue(1, 0, 30);
          dataTable.setValue(1, 1, 10);
          dataTable.setValue(2, 0, 40);
          dataTable.setValue(2, 1, 22);
          dataTable.setValue(3, 0, 50);
          dataTable.setValue(3, 1, 35);
          dataTable.setValue(4, 0, 60);
          dataTable.setValue(4, 1, 85);
          dataTable.setValue(5, 0, 70);
          dataTable.setValue(5, 1, null);
          dataTable.setValue(6, 0, 80);
          dataTable.setValue(6, 1, null);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('chart'));
        var options = {
          chf: 'a,s,000000FF|bg,s,FFFFFF00',
          chs: '440x220',
          cht: 'lxy',
          chco: '3072F3,FF0000',
          chd: 't:10,20,40,80,90,95,99|20,30,40,50,60,70,80|-1|5,10,22,35,85',
          chdl: 'Ponies|Unicorns',
          chdlp: 'b',
          chls: '2,4,1|1',
          chma: '5,5,5,25',
          chtt: 'Test'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

      google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback);

    </script>
  </body>
</html>

Open in new window

0
 

Author Closing Comment

by:radugheorghies
ID: 36558743
This is what I need.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

As the Marketing Director for the company I work for, time is a commodity that I have relatively little of.  My time is divided between coaching my team, creating a direction for our company's future AND actually getting stuff done.  As a result, I …
Messaging apps are amazing tools with the power to do a lot of good, but the truth is the process of collaborating with coworkers requires relationships established through meaningful communication - the kind of communication that only happens face-…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now