What I came up could probably be simplified. It seems a lot of work to
extract the row and column numbers from the class names I gave to the cells.
<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);
}
})();
A working example is at http://brisray.com/google-charts/tablepops.htm
The Google Sheet used is the same as the last example.
On Friday, March 5, 2021 at 8:34:43 PM UTC-5 Ray Thomas wrote:
> Tooltips are not natively supported by table charts -
> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#supported-charts
>
> I thought about this when writing the table and someone wants me to try
> and do it in a project for work that they've been waiting ages for.
>
> They are old, but two articles that I thought may be useful are at
> https://groups.google.com/g/google-visualization-api/c/yc3DU997Dx0 and
> https://stackoverflow.com/questions/18735594/handling-a-hover-event-for-a-google-charts-table
>
> You can also give each cell in the table a class name -
> https://developers.google.com/chart/interactive/docs/gallery/table#data-format
>
>
> Just thinking out loud...
>
> Instead of changing the value, change the formatted text with what I wrote
> (f instead of v) - setFormattedValue -
> https://developers.google.com/chart/interactive/docs/reference#methods
> Give each cell a classname based on row and column number
> Use some sort of tooltip or popup code to retrieve the cell classname when
> hovered over
> Display the original value of cell in the tooltip/popup
>
> I'm not promising anything, but I'll try and take another look at this.
>
>
> On Friday, March 5, 2021 at 5:15:02 AM UTC-5 idan...@gmail.com wrote:
>
>> Hi,
>>
>> Thanks for your answer
>>
>> Can I make it that when click on the cell it will show all the text as
>> tooltip or other way ?
>>
>> ב-יום שישי, 5 במרץ 2021 בשעה 04:37:56 UTC+2, Ray Thomas כתב/ה:
>>
>>> Hi
>>>
>>> What you need to do is step through the datatable, test the length of
>>> the text in each cell, then change it if necessary.
>>>
>>> Here's an example:
>>>
>>> <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++) {
>>> var quote = quotes.getValue(i, j);
>>> if (quote.length >= maxLength) {
>>> quote = quote.slice(0,maxLength) + "...";
>>> quotes.setValue(i,j,quote);
>>> }
>>> }
>>> }
>>>
>>> var chart = new
>>> google.visualization.Table(document.getElementById('quotes_div'));
>>> chart.draw(quotes);
>>> }
>>> })();
>>> </script>
>>>
>>> You can see this working at http://brisray.com/google-charts/getset.htm
>>> and the original spreadsheet at
>>> https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/#gid=1950745726
>>>
>>> Instead of .slice you can use .substring
>>>
>>> On Sunday, February 14, 2021 at 2:30:09 PM UTC-5 idan...@gmail.com
>>> wrote:
>>>
>>>> Hi,
>>>>
>>>> I am using dataTable to show data return from sql query
>>>> The columns are being created dynamaclly depend on the query
>>>>
>>>> for some column I can have long text inside column.
>>>>
>>>> I want to limit number of chars in columns to 50 chars for example and
>>>> if there is longer text it will appear with elipsis
>>>>
>>>> I saw some example but none was working
>>>> Can it be done and how ?
>>>>
>>>> Thanks
>>>>
>>>>
--
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/2a2683a9-d6ba-4810-8031-278bdb0ad34an%40googlegroups.com.
