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
On Friday, December 18, 2020 at 2:27:47 PM UTC-5 Jamie wrote:
> 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
>
> On Friday, December 18, 2020 at 4:48:54 AM UTC-8 Daniel LaLiberte wrote:
>
>> 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.
>>
>> On Fri, Dec 18, 2020 at 1:11 AM Jamie <northpa...@gmail.com> wrote:
>>
>>> Forgot the chart screenshot.
>>> [image: Sample Aggregate Chart.png]
>>>
>>> On Thursday, December 17, 2020 at 10:05:59 PM UTC-8 Jamie wrote:
>>>
>>>> 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
>>>>
>>>> On Thursday, December 17, 2020 at 10:01:59 PM UTC-8 Jamie wrote:
>>>>
>>>>> 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
>>>>> <https://developers.google.com/chart/interactive/docs/events> > The
>>>>> select event) and the row isn't always accessible either. Here is a
>>>>> recording of my interaction with the documentation example.
>>>>> <https://accruent.zoom.us/rec/share/BTomnPARQawUrFDfDc245hxx0s_MLt-iFhgIRUXXBHE0JkftsHGY55-eDtEpSEA3.6D0X9zm9ArA9zUeT?startTime=1608269308000>
>>>>> 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
>>>>>
>>>> --
>>> 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
>>>
>>> <https://groups.google.com/d/msgid/google-visualization-api/2dd068c6-73b9-4a56-8889-538bbea43563n%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>
>>
>> --
>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
>> dlalibe...@google.com Cambridge MA
>>
>>
--
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-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/329d3d45-bf66-4201-a257-782a85452ba1n%40googlegroups.com.
