Solved

Google Charts API transparent background

Posted on 2011-09-13
3
1,596 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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 …
Online collaboration is quickly becoming embedded in the workplace, and its benefits are tangible. See what the current landscape looks like and what the future holds for collaboration tools and the future of work.
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

825 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