CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Justin Hollender
Justin Hollender

Reputation: 373

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

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/

Upvotes: 3

Views: 7820

Answers (1)

asgallant
asgallant

Reputation: 26330

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/

Upvotes: 4

Related Questions