Search code examples
javascriptchartsgoogle-visualization

Google Charts get column label value

How can i retrieve the value for the grouped columns? In this case i want the value that is seen both at the bottom of the graph and the tooltip. I'm not quite sure to access it. I know this value is in the first row of the dataTable when i initially set it. But how do i retrieve it based on which column is clicked?

enter image description here

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

var theChart;
var dataTable;

function drawGraph() {
      var jsonData = ([
      	["Something", "Else", "here"],
        [8, 1, 0.25],
        [9, 2, 0.5],
        [10, 3, 1],
        [11, 4, 2.25],
        [12, 5, 2.25],
        [13, 6, 3],
        [14, 7, 3.25],
        [15, 8, 5],
        [16, 9, 6.5],
        [17, 10, 10],
      ]);

      var options = {};
			dataTable = new google.visualization.arrayToDataTable(jsonData);
      theChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      google.visualization.events.addListener(theChart, 'select', selectHandler);
      theChart.draw(dataTable, options);
    }

function selectHandler() {
   var selection = theChart.getSelection();
   for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      console.log(item)

      var selectedData = dataTable.getValue(item.row, item.column);
      console.log(selectedData);
      
      console.log(dataTable.getColumnProperties(item.column));
      console.log(dataTable.getRowProperties(item.row));

      console.log(dataTable.getColumnLabel(item.column));
      console.log(dataTable.toJSON());
      console.log('>>>>');
   }
}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

Solution

  • you have the code to get the value of the column (7), 

    var selectedData = dataTable.getValue(item.row, item.column);

    the other value you need is the x-axis value (14).
    this can be found in the first column of the data table.
    just use 0 as the column index. 

    var selectedLabel = dataTable.getValue(item.row, 0);

    see following working snippet... 

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

var theChart;
var dataTable;

function drawGraph() {
  var jsonData = ([
    ["Something", "Else", "here"],
    [8, 1, 0.25],
    [9, 2, 0.5],
    [10, 3, 1],
    [11, 4, 2.25],
    [12, 5, 2.25],
    [13, 6, 3],
    [14, 7, 3.25],
    [15, 8, 5],
    [16, 9, 6.5],
    [17, 10, 10],
  ]);

  var options = {};
  dataTable = new google.visualization.arrayToDataTable(jsonData);
  theChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(theChart, 'select', selectHandler);
  theChart.draw(dataTable, options);
}

function selectHandler() {
  var selection = theChart.getSelection();
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    console.log(item)

    var selectedData = dataTable.getValue(item.row, item.column);
    var selectedLabel = dataTable.getValue(item.row, 0);
    console.log(selectedLabel, selectedData);
  }
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>