setting column width

72 views
Skip to first unread message

Idan Shay

unread,
Feb 14, 2021, 7:30:09 PM2/14/21
to Google Visualization API
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

Ray Thomas

unread,
Mar 5, 2021, 2:37:56 AM3/5/21
to Google Visualization API
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');
      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>


Instead of .slice you can use .substring

Idan Shay

unread,
Mar 5, 2021, 10:15:02 AM3/5/21
to Google Visualization API
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 כתב/ה:

Ray Thomas

unread,
Mar 6, 2021, 1:34:43 AM3/6/21
to Google Visualization API

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.


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.
Message has been deleted

Ray Thomas

unread,
Mar 7, 2021, 7:56:10 AM3/7/21
to Google Visualization API
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');
       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);

}
})();

The Google Sheet used is the same as the last example.

Reply all
Reply to author
Forward
0 new messages