Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1811
  • Last Modified:

Google Charts API transparent background

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
radugheorghies
Asked:
radugheorghies
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
try replacing line 33 by
<div id="chart_div" style="opacity:0.4;filter:alpha(opacity=40);"></div>
0
 
radugheorghiesAuthor Commented:
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
 
radugheorghiesAuthor Commented:
This is what I need.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now