Handle Google Chart Events and User Selection

google.visualization.events.addListener(chart, 'select', () => {
  const selection = chart.getSelection();
  if (selection.length) {
    console.log(selection[0]);
  }
});
chart.draw(data, options);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var my_2d = [["PHP","300"],["JavaScript","200"],["MySQL","100"],
["JQuery","200"],["HTML","200"],["ASP","100"]]
 // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
 // Set a callback to run when the Google Visualization API is loaded.
  google.charts.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', 'Languages');
        data.addColumn('number', 'Tutorials');
        for(i = 0; i < my_2d.length; i++)
    data.addRow([my_2d[i][0], parseInt(my_2d[i][1])]);
        // Set chart options
        var options = {'title':'Tutorials at plus2net.com',
                       'width':400,
                       'height':300
					   };
        // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'select', my_Handler);
  chart.draw(data, options);
	/////////////
function my_Handler() {
 var selectedItem = chart.getSelection()[0];
 var value1 = data.getValue(selectedItem.row, 0);
 var value2 = data.getValue(selectedItem.row, 1);
 document.getElementById('disp').innerHTML="Tutorial: " + value1 + "<br> Nos : " + value2;
}
///////////////	  
 }
</script>

HTML

<div id='chart_div' ></div>

<div class='alert alert-primary' role='alert' id=disp>
Details will be displayed here
</div>

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: