Binding Events in google pie chart

Question

I have a Pie Charts generated by Google Chart API. The code for the chart goes as Below

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

function drawChart1() 
{
var data = google.visualization.arrayToDataTable([
        ['Location', 'Value'],
        ["Location A", 20 ],
        ["Location B", 32],
        ["Location C", 12],
        ["Location D", 20],
        ["Location E", 2],
        ["Location F", 20],
        ["Location H", 10]
        ]);

var options = {
    colors          : ['#00918c', '#d0c500','#945a94', '#84ac43', '#ea8c1c', '#006daf', '#c54d4d'],
        is3D            : 'false',
        isHTML          : 'false',
        height          : 200,
        width           : 285,
        backgroundColor : "transparent",
        chartArea       : {left:0,top:0,width:"100%",height:"100%"},                
        legend          : {position: 'right', alignment: "end"}
        };

var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, options);

}

The Link for the chart is as Below

Click to see Chart

I want to capture the event in the chart when they click any pie area.

Suppose if they click on Location A pie in pie chart I want a function that displays alert message as Location A Clicked and same for other pie's in chart.

Thanks for reply

I guess you can have a look to this [question][1] for a possible duplicate. [1]: http://stackoverflow.com/questions/11473177/how-to-add-link-to-a-part-google-pie-chart/11480387#11480387 — Marc Polizzi, Jan 08 '13 at 06:22
I have small doubt.How do they add function with in function in javascript.The selectHandler() is within drawChart(). — ArrayOutOfBound, Jan 08 '13 at 06:47
Is it possible that I can make a whole pie chart unclickable? if yes please guide how? — Atul Rajput, Dec 04 '19 at 12:40

score 5 · Answer 1 · answered Jan 08 '13 at 06:46

I added the code below and its working fine now.

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

 function selectHandler() 
     {
   var selectedItem = chart.getSelection()[0];

       if (selectedItem) 
       {
         var topping = data.getValue(selectedItem.row, 0);
         alert('The user selected ' + topping);
       }
     } 


    google.visualization.events.addListener(chart, 'select', selectHandler);            
    chart.draw(data, options);

Is it possible that I can make a whole pie chart unclickable? if yes please guide how? — Atul Rajput, Dec 04 '19 at 12:40

score 3 · Answer 2 · edited Oct 08 '15 at 07:28

See the link for Binding Events in google pie chart.

<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    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]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    function selectHandler() {
      var selectedItem = chart.getSelection()[0];
      if (selectedItem) {
        var topping = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + topping);
      }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);
    chart.draw(data, options);
  } </script>

Is it possible that I can make a whole pie chart unclickable? if yes please guide how? — Atul Rajput, Dec 04 '19 at 12:40

Binding Events in google pie chart

2 Answers2