Using event listener on ComboChart to return value beyond index of chart

[Nick Stennes]

Hey guys,

I have been developing an app where I am using the Google API charts to display various forms of information. A functionality i wish to incorporate is allowing a user to click on a bar of the ComboChart (x-axis: Name, y-axis: numbers) and display a modal with corresponding indexed values of the name.

I am feeding the chart with a CSV where column 0 is the Name and column 1 is the number value. I have a column 2 which contains the information i wish to return to the user based on their bar click.

I have coded as much as to get it working when the user clicks the names on the x-axis but will not return anything unless the column is a 0 or 1. It returns an error if the getValue() is returning anything that is not a 0 or 1. I have my CSVreader reading all 3 columns and allows the chart to use columns 0 and 1.

Included below is the jQuery from one of my pages.

Any tips and/or help is appreciated, I have been stuck on this all day.

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);


function drawChart() {
   // grab the CSV
   $.get("barSumtest.csv", function(csvString) {
     
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

     
      var data = new google.visualization.arrayToDataTable(arrayData);

     
      var totalColumns = 2
      var view = new google.visualization.DataView(data);
      var columns = [];
      for (var i = 0; i <= totalColumns-1; i++) {
        if (i > 0) {
        columns.push(i);
        columns.push({
            calc: "stringify",
            type: "string",
            role: "annotation"
        });

       } else {
        columns.push(i);
       }
      }    

      view.setColumns(columns);

     // set chart options
     var options = {
        title: "Top 50 Individual Contributors by Contribution Sum",
        hAxis: {title: "Contributor Name", textStyle : {
            fontSize: 7, bold: true,
        }},
        vAxis: {title: "Contribution Sum ($)"},
        seriesType: 'bars',
        series: {3: {type: 'line'}},
        //bar: {groupWidth: 1000}
     };

     // create the chart object and draw it
     var chart = new google.visualization.ComboChart(document.getElementById('barSum'));
     chart.draw(data, options);
 
  google.visualization.events.addListener(chart, 'click', function(e) {
    var match = e.targetID.match(/hAxis#\d#label#(\d)/);
    if (match != null && match.length) {
        var rowIndex = parseInt(match[1]);
        var label = data.getValue(rowIndex, 2);
        alert('You clicked on ' + label);
    }
});

  });
 
}