Question

196

How do I add a legend and a label to my Google Pie Chart?

rated 0 times [ 197] [ 1] / answers: 1 / hits: 7746 / 11 Years ago, wed, december 11, 2013, 12:00:00

How can I set a legend and labels for my Google pie chart?

The deprecated method had this ability: https://developers.google.com/chart/image/docs/gallery/pie_charts

Also, how can I make it so that onclick the selected slice gets exploded from the pie a little?

Here's what I have so far:

  <div id=pie_chart_div style=width: 940px; height: 500px;></div>



  <script type=text/javascript src=https://www.google.com/jsapi></script>

  <script type=text/javascript>

    google.load(visualization, 1, {packages:[corechart]});

    google.setOnLoadCallback(render_applicant_sources);



    function render_applicant_sources() {

      var data = new google.visualization.arrayToDataTable([[Source,Number of Applicants],[Hospitality Online,222],[Indeed,22]]);



      data.addColumn('string', 'Geocoder');

      data.addColumn('number', 'Geocodes');



      var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));



      var options = {

          title: 'Scottsdale Resort & Conference Center from December  1, 2012 to December  1, 2013',

          is3D: true,

          colors: [ '#2483b3', '#AAC789', '#1E4147', '#437356', '#F34A53', '#FAE3B4' ],

          titleTextStyle: { bold: false },

          legend: { position: 'labeled' }

      };



      chart.draw(data, options);



      google.visualization.events.addListener(chart, 'click', function(e){

        var data = chart.getSelection();

        if(data.length > 0) {

            chart.setSelection([]);

        }

      });

    }

  </script>

http://jsfiddle.net/xHwZW/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago billier · Accepted Answer

You need to use a select event handler, and set the chart's slices.<slice index>.offset option:

google.visualization.events.addListener(chart, 'select', function() {

    var selection = chart.getSelection();

    if (selection.length > 0) {

        if (!options.slices || !options.slices[selection[0].row]) {

            // if this is the first time the user clicked on the pie,

            // or if the user clicks on an unexploded slice,

            // unexplode all slices and explode the selected slice

            options.slices = [];

            options.slices[selection[0].row] = {

                offset: 0.4

            };

        }

        else {

            // otherwise the user clicked on an exploded slice, so unexplode all slices

            options.slices = [];

        }

        chart.draw(data, options);

    }

    else {

        options.slices = [];

        chart.draw(data, options);

    }

});

See working example: http://jsfiddle.net/asgallant/R8yAK/