Chart type table - maximum column width

[Skyo LiveDe]

Dear google group!

The chart type "table" offers the option to set the maximum width of
the table, if set smaller than the size required by the table, it will
add a horizontal scroll bar.

However I would like to set a maximum size for columns, as some of my
entries a really long.
Long entries should be abreviated by (...) and pop up by a mouse-
hover. (kind of like in excel)

Input:

aaa | 2
rrr | 6
qqqqqqqqqqqqqq | 9
ccc | 7


Desired output:

aaa | 2
rrr | 6
qqq... | 9
ccc | 7



Regards, Skyo LiveDe.

[asgallant]

You are going to have to roll your own solution for this one.  I believe CSS allows you to set the maximum column width of a cell, with the 'max-width' property (don't take my word for it, I'm not a CSS guy, so double check first), which should fix the width problem.  As far as truncating your data and adding a tooltip (which I assume is what you meant when you said popup), you'll have to come up with some way of deciding what is too long, and manually truncate entries that meet your criteria (by setting their formatted value).  You can add custom properties to the cells, which should allow you to store the information you need to retrieve the data again:

// data is the DataTable
// col is the column to check
// tooLong() returns true if the string is too long
// truncateString() returns the truncated string
for (var i = 0; i < data.getNumberOfRows; i++) {
    if (tooLong(data.getValue(i, col))) {
        data.setFormattedValue(i, col, truncateString(data.getValue(i, col)));
        data.setProperty(i, col, 'className', 'tooltip row' + i);
    }
}

All the elements with class 'tooltip' should be handled by your tooltip function.  You can fetch the original data again by parsing the classes that each tooltip element belongs to for one that begins with 'row'.  The number following 'row' is the DataTable row number, which you can use to get the original value.

There are a number of scripts available for handling tooltips, Google will help you find them.  I am partial to jQuery plugins for this sort of thing; if you decide to use one of them, I can probably help you get it set up.