Google Visualization table chart click and return row / column values not working in Mozilla browser

I'm running into a problem with differences between Chrome and Mozilla browsers in the below code.

When you click on a cell the code returns the row / column clicked. It works fine in Chrome, but when I click a cell in Mozilla nothing happens.

I think it has something to do with this bit of code but I really don't know.

var selection = table.getChart().getSelection();
if (selection.length === 0)
  return;

var e = event || window.event;
var cell = e.target; //get selected cell

I am referencing this post from a few years ago. The code in this post works in Chrome works but not in Mozilla, you click and nothing happens.

https://stackoverflow.com/questions/20165281/google-chart-getselection-doesnt-have-column-property/33445620#33445620

Here's my full program. Any idea how to resolve the Chrome vs Mozilla conflict??

Thank you as always!

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

renderChart_onPageLoad();

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawTable();
  }); //END setOnLoadCallback
} //END function renderChart_onEvent

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);
  console.log('jsonArray'); console.log(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
  //console.log('data');
  //console.log(data);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        //'label': 'Actual State:',
        //'labelSeparator': ':',
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'select', function() {

    //ORIGINAL from older post https://stackoverflow.com/a/33445620
    var selection = table.getChart().getSelection();
    if (selection.length === 0)
      return;

    var e = event || window.event;
    var cell = e.target; //get selected cell

    document.getElementById('output1').innerHTML = "Row: " + selection[0].row + " Column: " + cell.cellIndex;

    //NEW additional requirements

    var tableDataView = table.getDataTable();

    var selectedRow = selection[0].row;
    var selectedCol = cell.cellIndex;

    document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

    var colID = tableDataView.getColumnId(selectedCol);
    var colLabel = tableDataView.getColumnLabel(selectedCol);

    document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;

  });
}





//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
  <div id='div_categoryPicker1'></div>
  <div id='div_table'></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>

<script>
  var json = [{
      "division": "GS",
      "m1": 100.000000,
      "m2": 100.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "GS",
      "m1": 100.000000,
      "m2": 90.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": null,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 75.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }
  ];

</script>

1 answer

  • answered 2018-11-08 12:58 WhiteHat

    google's table chart produces a normal html <table>.

    instead of using google's 'select' event,
    we can assign a standard 'click' event to the table's <td> elements.

    wait until the table chart's 'ready' event fires.
    then assign click handler to the cells.

    to get column index --> cell.cellIndex
    to row index --> cell.closest('tr').rowIndex

    google.visualization.events.addListener(table, 'ready', function() {
      var container = document.getElementById(table.getContainerId());
      Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
        cell.addEventListener('click', selectCell);
      });
    
      function selectCell(sender) {
        var cell = sender.target;
        var row = cell.closest('tr');
        document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;
    
        //NEW additional requirements
    
        var tableDataView = table.getDataTable();
    
        var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
        var selectedCol = cell.cellIndex;
    
        document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;
    
        var colID = tableDataView.getColumnId(selectedCol);
        var colLabel = tableDataView.getColumnLabel(selectedCol);
    
        document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
      }
    
    });
    

    see following working snippet...

    google.charts.load('current', {
      'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
    });
    
    renderChart_onPageLoad();
    
    function renderChart_onPageLoad() {
      google.charts.setOnLoadCallback(function() {
        drawTable();
      }); //END setOnLoadCallback
    } //END function renderChart_onEvent
    
    function drawTable() {
      var jsonArray = jsonDataArray_1to1(json);
    
      //Modify header row to include id and label
      jsonArray = arrayHeaderRow_id_label_date(jsonArray);
      console.log('jsonArray'); console.log(jsonArray);
    
      var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
      //console.log('data');
      //console.log(data);
    
      var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));
    
      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker1',
        'matchType': 'any',
        'options': {
          'filterColumnIndex': 0, //Column used in control
          'ui': {
            //'label': 'Actual State:',
            //'labelSeparator': ':',
            'labelStacking': 'vertical',
            'selectedValuesLayout': 'belowWrapping',
            'allowTyping': false,
            'allowMultiple': false,
            'allowNone': true
          }
        }
      });
    
      var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'div_table',
        options: {
          allowHtml: true
        }
      });
    
      dashboard.bind([categoryPicker1], [table]);
      dashboard.draw(data);
    
      google.visualization.events.addListener(table, 'ready', function() {
        var container = document.getElementById(table.getContainerId());
        Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
          cell.addEventListener('click', selectCell);
        });
    
        function selectCell(sender) {
          var cell = sender.target;
          var row = cell.closest('tr');
          document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;
    
          //NEW additional requirements
    
          var tableDataView = table.getDataTable();
    
          var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
          var selectedCol = cell.cellIndex;
    
          document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;
    
          var colID = tableDataView.getColumnId(selectedCol);
          var colLabel = tableDataView.getColumnLabel(selectedCol);
    
          document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
        }
    
      });
    
    }
    
    
    
    
    
    //Library
    
    function jsonDataArray_1to1(json) {
      //DYNAMIC JSON ARRAY
    
      var dataArray_cln = [];
    
      //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
      var dataArray_keys = Object.keys(json[0]);
    
      dataArray_cln.push(dataArray_keys);
    
      //Add rows 1 to json.length with null values
      var dataArray_rows = json.length;
      var dataArray_cols = dataArray_keys.length;
    
      for (i = 0; i < dataArray_rows; i++) {
        dataArray_cln.push(Array(dataArray_cols).fill(null));
      }
    
      //Update array from json data
      for (i = 0; i < dataArray_rows; i++) {
        //[i + 1] because row 0 is the header, push begins with row 1
        //dataArray_cln[row][col]
    
        //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
        for (var j = 0; j < dataArray_keys.length; j++) {
          eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
        }
      }
    
      //console.log(dataArray_cln);
      return dataArray_cln;
    }
    
    function arrayHeaderRow_id_label_date(arr) {
      for (var i = 0; i < arr[0].length; i++) {
        var valueOrig = arr[0][i];
        var valueNew;
        switch (true) {
          case valueOrig === 'wd':
            valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
            break;
          default:
            valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
        }
        arr[0][i] = valueNew;
      }
      return arr;
    }
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id='div_dashboard'>
      <div id='div_categoryPicker1'></div>
      <div id='div_table'></div>
    </div>
    
    <div id="output1"></div><br/>
    <div id="output2"></div><br/>
    <div id="output3"></div><br/>
    
    <script>
      var json = [{
          "division": "GS",
          "m1": 100.000000,
          "m2": 100.000000,
          "m3": null,
          "m4": null,
          "m5": null,
          "m6": null,
          "m7": null,
          "m8": null,
          "m9": null,
          "m10": null,
          "m11": null,
          "m12": null,
        },
        {
          "division": "GS",
          "m1": 100.000000,
          "m2": 90.000000,
          "m3": null,
          "m4": null,
          "m5": null,
          "m6": null,
          "m7": null,
          "m8": null,
          "m9": null,
          "m10": null,
          "m11": null,
          "m12": null,
        },
        {
          "division": "PS",
          "m1": null,
          "m2": null,
          "m3": 100.000000,
          "m4": null,
          "m5": 100.000000,
          "m6": 100.000000,
          "m7": 75.000000,
          "m8": null,
          "m9": null,
          "m10": null,
          "m11": null,
          "m12": null,
        },
        {
          "division": "PS",
          "m1": null,
          "m2": null,
          "m3": 100.000000,
          "m4": 100.000000,
          "m5": 100.000000,
          "m6": 100.000000,
          "m7": 80.000000,
          "m8": null,
          "m9": null,
          "m10": null,
          "m11": null,
          "m12": null,
        }
      ];
    
    </script>