CODEWITHSUNDEEP
javascriptapigoogle-visualizationbackground-color
Django Anonymous
Django Anonymous

Reputation: 3025

How to make google pie chart api background transparent

this is the google code for pie char apt:

<script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var options = {backgroundColor: '#676767',
                       'width':400,
                       'height':300};

        var chart = new google.visualization.PieChart(document.getElementById('priority_customers_report'));
        chart.draw(data, options);
      }
    </script>

Here the backgroundColor: '#676767' gives us the color now I want it to be transparent, how can I do that?

And how to set the text in bottom? As it's not clear in Google Documentation, really tough to understand.

This is related to the Simple Pie Chart of Google

Upvotes: 17

Views: 24111

Answers (3)

Arnoud Philip
Arnoud Philip

Reputation: 1

In IE, using jQuery, you can do the following to set the chart's background to transparent:

$('#vis iframe').attr('allowTransparency', 'true');
$('#vis iframe').contents().find('body').css('background', 'transparent');

where #vis is the id of the div where the chart is at.

Upvotes: 0

MrCode
MrCode

Reputation: 64526

The transparent background can be set with:

    var options = {backgroundColor: 'transparent',
                   'width':400,
                   'height':300};

You can also set the title there:

    var options = {backgroundColor: 'transparent',
                   'width':400,
                   'height':300,
                   'title' : 'My Chart'};

Edit: To set the right hand items to show at the bottom use:

    var options = {backgroundColor: 'transparent',
                   'width':400,
                   'height':300,
                   'title' : 'My Chart'
                   legend : { position : 'bottom' }
                   };

The list of possible options are here.

Upvotes: 29

Django Anonymous
Django Anonymous

Reputation: 3025

I got the answerbackgroundColor: '#676767' with backgroundColor: {fill: 'transparent'} and it will do the needful.

This will not work on IE as IE does not support Transparency, still we can add color of our choice by writing this code:-

With a bit of help from jQuery: 

// check for IE 
if ($.browser.msie) { 
    options2['backgroundColor'] = {fill: <color>}; 
} 

else { 
    options2['backgroundColor'] = {fill: 'transparent'}; 
}

Still i am unable to set the position in bottom....

Upvotes: 0

Related Questions