How I can get line label value (Google Charts)

Question

Lets say I have basic google line chart like this (code is copy from google dev site):

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  11.7, 18.8, 10.5],
    [5,  11.9, 17.6, 10.4],
    [6,   8.8, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900,
    height: 500
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

            function selectHandler() {                  
              var selectedItem = chart.getSelection()[0];
              if (selectedItem) {
                var value = data.getValue(selectedItem.row, selectedItem.column);
                var topping = data.getValue(selectedItem.row, 0);

                alert('The user selected ' + topping + ' - ' + value);
              }
            }

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

  chart.draw(data, options);
}

I have there listener and I can get current line value and x-axel value, but no idea how I can get current line label text

Answer 1

You can use the getColumnLabel function to get the label text:

 data.getColumnLabel(selectedItem.column)

Here is a working example:

 google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('linechart_material')); function selectHandler() { var selectedItem = chart.getSelection()[0]; if (selectedItem) { var value = data.getValue(selectedItem.row, selectedItem.column); var topping = data.getValue(selectedItem.row, 0); var columnLabel = data.getColumnLabel(selectedItem.column) alert('The user selected ' + columnLabel + ': ' + topping + ' - ' + value); } } google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--Div that will hold the pie chart--> <div id="linechart_material"></div>