Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 898
Django Anonymous Avatar asked Apr 02 '12 10:04

Django Anonymous


1 Answers

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.

like image 195
MrCode Avatar answered Oct 22 '22 15:10

MrCode