How do I get the information about the selected bar in the Google Charts?

I have a chart rendered via the Google Charts API. How do I get the data about the selected bar when a user clicks on a Bar. I understand it to the point where I make the "getSelection" call to output selection information. When ever I click on a bar I get this. enter image description here

My code is

      <div class="row">
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
         
      var data = google.visualization.arrayToDataTable([
      ['Salesman', 'Visit'],
      
      //Some PHP Code
      
      ]);

        var options = {
          chart: {
            title: '',
            subtitle: '',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        google.visualization.events.addListener(chart, 'select', selectHandler);
      }

function selectHandler() {

    var selectedItem = chart.getSelection()[0];
if (selectedItem) {
    var selectedValue = data.getValue(selectedItem.row, 0);
    console.log('The user selected ' + selectedValue);
}

}

How do I get the information about the selected bar in the Google Charts?

1 Answers