CODEWITHSUNDEEP
google-visualization
ArrayOutOfBound
ArrayOutOfBound

Reputation: 2618

Binding Events in google pie chart

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

Upvotes: 3

Views: 10468

Answers (2)

Jignesh Adesara
Jignesh Adesara

Reputation: 41

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>

Upvotes: 3

ArrayOutOfBound
ArrayOutOfBound

Reputation: 2618

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);

Upvotes: 5

Related Questions