Challenges with the Select event or getSelection method?

[Jamie]

I want to create a table that shows aggregate values like the one below, where each numeric cell can be clicked on to show a list of the contributing source records. To do this, I plan to use the row and column indices from the selection to get the row and column attributes to select the appropriate source records.

Unfortunately, I don't seem to be able to get the column using the approach shown in the API documentation (Handling Events > The select event) and the row isn't always accessible either. Here is a recording of my interaction with the documentation example.

In this recording, you will see the following:

• Clicking on a cell in the first column displays the "You selected nothing" message, which suggests the getSelection method is returning null for both row and column.
• Clicking on a cell in the second column displays the message that identifies the selected row, but not the column, which suggests the getSelection method is returning null for the column.

This is a critical piece for my current project, so I would greatly appreciate any direction or alternate solution anyone can provide.

Thanks in advance,

Jamie

[Jamie]

Aaand...I just noticed the note that says Table Charts only fires row selection events. Nonetheless, the first issue seems like a possible bug and I really would like to know whether I can determine a cell selection.

Thanks again,

Jamie

[Jamie]

Forgot the chart screenshot.

[Daniel LaLiberte]

The selection event toggles the current selection.  Maybe you want just the 'click' event instead.

I agree that being able to get the column index (or id even) when clicking on a table cell, and selecting a table cell, or whole column, would be a convenience for many applications.  It will require some changes to the Table chart to support these, but I don't know of any inherent conflicts.  Maybe I will get inspired over the next couple weeks.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2dd068c6-73b9-4a56-8889-538bbea43563n%40googlegroups.com.

--

Daniel LaLiberte

dlaliberte@Google.com   Cambridge MA

[Jamie]

Hi, Daniel,

Thanks for the quick reply. From the documentation, I was under the impression that the click event would not work. I will investigate this option and update this thread accordingly.

What you're saying about toggling the current selection makes sense to me in the context of the broad application of the select event (that is, I see how the piece of a PieChart does have a column association to the DataTable in a way that Table chart's cell does not). I do think you may still have a bug when clicking on a cell in the first column of a row in the Table chart. It seems to me that should return a row reference given the current design. I would definitely appreciate the addition of column reference in the Table chart select context.

Thanks again,

Jamie

[Ray Thomas]

Did you ever get this working Jamie?

Being able to natively get the cell or column references would be useful, but as they are not, what I did was add a unique class name to each cell, then use an eventListener, then used the results of that to get the row and column numbers back out of the unique class names I gave them. I was listening for mouseover and mouseout, but it will work for any other event.

The code I came up with is:

<script type="text/javascript">

var longText = (function() {

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

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

   var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A');

   var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=1950745726&headers=1&tq=' + queryString);

       query.send(handleQueryResponse);

    }

    function handleQueryResponse(response) {

       if (response.isError()) {

         alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

         return;

      }

      var quotes = response.getDataTable();

  var totalRows = quotes.getNumberOfRows();

  var totalCols = quotes.getNumberOfColumns();

  var maxLength = 50;

  for (i = 0; i < totalRows; i++) { 

     for (j = 1; j < totalCols; j++) {

// Set the cell's formatted (displayed) text from the cell's value 

     var quote = quotes.getValue(i, j);

     if (quote.length >= maxLength) {

      quote = quote.slice(0,maxLength) + "...";

    quotes.setFormattedValue(i,j,quote);

     }

// Set the cell's classname

quotes.setProperty(i,j,"className","r"+i+"c"+j);

  }   

  }

  var classNames = {};

  var options = {'cssClassNames': classNames};

 

      var chart = new google.visualization.Table(document.getElementById('quotes_div'));

      chart.draw(quotes, options);

  // Add event listeners for the table. Need mouseover and mouseout 

  let tableClass = document.getElementsByClassName("google-visualization-table");

  tableClass[0].addEventListener("mouseover", function( event ) {

var cellClass = event.target.className;

// cellClass is two texts, what we added and what Google puts in there 

var startLetter = cellClass.charAt(0);

if (startLetter == "r") {

   // We just need what we put in the cell class

   cellClass = cellClass.split(" ")[0];

   // cellClass is going to be an r followed by some numbers, then a c followed by some more numbers, need to extract the row and column numbers

   // Split cellClass at c 

   splitClass = cellClass.split("c");

   var rownum = parseInt(splitClass[0].slice(1));

   var colnum = parseInt(splitClass[1]);

   var longText = quotes.getValue(rownum,colnum);

   document.getElementById("popup_div").innerHTML = "<p>" + longText + "</p>";

   document.getElementById("popup_div").style.display = "inline-block";

}

}, false);

tableClass[0].addEventListener("mouseout", function( event ) {

       document.getElementById("popup_div").innerHTML = "";

   document.getElementById("popup_div").style.display = "none";

}, false);

}

})();

</script>

There's a working example at http://brisray.com/google-charts/tablepops.htm