How can I adjust column width of a table?

[osama abbas]

How can I set the column width of a table defined by

google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);

[asgallant]

There is no direct way to control the width of a column in the Table charts, but you might be able to get around it by using the DataTable#setProperty method (http://code.google.com/apis/chart/interactive/docs/reference.html#DataTable_setProperty, http://code.google.com/apis/chart/interactive/docs/gallery/table.html#customproperties) and give each cell in the column a CSS class which defines the cell width.

[osama abbas]

I have tried the following code but it did not work:

 google.load('visualization', '1', {packages:['table']});

      google.setOnLoadCallback(drawTable);

      function drawTable() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Company Name');

On Wed, Oct 19, 2011 at 2:27 PM, asgallant <drew_g...@abtassoc.com> wrote:

There is no direct way to control the width of a column in the Table charts, but you might be able to get around it by using the DataTable#setProperty method (http://code.google.com/apis/chart/interactive/docs/reference.html#DataTable_setProperty, http://code.google.com/apis/chart/interactive/docs/gallery/table.html#customproperties) and give each cell in the column a CSS class which defines the cell width.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/LqRgMsZGqwMJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[osama abbas]

sorry 

I have tried the following code but it did not work:

<script type='text/javascript'>

 google.load('visualization', '1', {packages:['table']});

      google.setOnLoadCallback(drawTable);

      function drawTable() {

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Company Name');

        data.addRows1(1);

        data.setCell(0, 0, 'Bsoft}');

data.setProperty(0,0,'width',100);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: false, width: 400});

}

</script>

could you give me an example with the (width) property. or tell me what is the problem of my code?

Thank you

[asgallant]

It should be:

data.setProperty(0, 0, {style: 'width:100px'});

You must set the table's allowHtml option to true for this to work, ie:

table.draw(data, {
    showRowNumber: false,
    width: 400,
    allowHtml: true
});

[osama abbas]

Thank you for your great efforts.

sorry it did not work with me, I use PHP with smarty. could you suggest another solution?

Thank you

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/m5I6jVxfaTkJ.

[asgallant]

My mistake, I used the format that is needed if you are passing the property in the setCell call.  This is what you are looking for:

data.setProperty(0, 0, 'style', 'width:100px');

Alternatively, you can set it when you set the cell, like this:

data.setCell(0, 0, 'Bsoft', 'Bsoft', {style: 'width:100px'});

[osama abbas]

Thank you very much, this solution works with me.

Again thank you

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/oQ1g7ayJr7IJ.

[asgallant]

You're welcome.

[Jay OCHS]

Any idea why this solution does not work on a table read in from a google sheet?  See https://jsfiddle.net/Jay_Campbell/dgbh6sL0/124/

On Thursday, October 20, 2011 at 10:08:12 AM UTC-4, asgallant wrote:

You're welcome.

[Daniel LaLiberte]

Hi Jay,

You are setting the 0th row property, which is actually the first data row, not the header row.  If you set some other property, such as 'color', you will see that the property is being set properly for the data cell, and you can see (in the debugger) your width setting for the element as well. 

But even if you could set the width of the header column (a th element), this is not all you need to do to set the width of an html table.  There might be some interference with other settings for the table, and its containers, however.   It might be that we have broken the ability to set the column width of a table.   So, experiment with removing your 100% width option, or setting to a specific width, or 'auto'.  

Hope that helps.

--

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+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c36007a7-fafb-43cc-a097-20cf80fdb450%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Daniel LaLiberte]

Sorry, I forgot to mention that you will need to use css to set the width of a column, if you can do it at all.  And you will need to do it not using any of the supported cssClassNames, since not apply to specific columns.

I suppose it would be easier for users if we provide more direct support for this kind of thing.

On Sun, May 7, 2017 at 7:39 PM, Daniel LaLiberte <dlali...@google.com> wrote:

Hi Jay,

You are setting the 0th row property, which is actually the first data row, not the header row.  If you set some other property, such as 'color', you will see that the property is being set properly for the data cell, and you can see (in the debugger) your width setting for the element as well. 

But even if you could set the width of the header column (a th element), this is not all you need to do to set the width of an html table.  There might be some interference with other settings for the table, and its containers, however.   It might be that we have broken the ability to set the column width of a table.   So, experiment with removing your 100% width option, or setting to a specific width, or 'auto'.  

Hope that helps.

On Sun, May 7, 2017 at 3:38 PM, Jay OCHS <info@orangecountyhistoricalsociety.org> wrote:

Any idea why this solution does not work on a table read in from a google sheet?  See https://jsfiddle.net/Jay_Campbell/dgbh6sL0/124/

On Thursday, October 20, 2011 at 10:08:12 AM UTC-4, asgallant wrote:

You're welcome.

--
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 post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c36007a7-fafb-43cc-a097-20cf80fdb450%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Jay OCHS]

Here are some of my findings on setting column widths in gviz tables.  My main issue was with cells with long text that I wanted to set a min-width to reduce the vertical space taken with wrapping. The google visualization default width appears to be the width of the header text.(for a table so wide it needs to be horiz scrolled)  So my very crude solution is to make the header text my min-width (ie ' ---------------------Header for Col B------------------------').  I am sure there is some more exotic way to do this, but this suits my purposes for now.

The setProperty statement (ie. data.setProperty(0,0,'style','width:400px'); does work (even though 0.0 is not the header cell), BUT only if there is adequate room in the allotted div.  For example, it cannot be so large that horizontal scrolling would be needed?? It can be made smaller, but not smaller than the header text (the header text cannot be wrapped?) and no smaller than smallest string fragment in that column. [see my fiddle where I forced 'Name' column to wrap.]  https://jsfiddle.net/Jay_Campbell/Lhqrj7yq/2/

On Sunday, May 7, 2017 at 7:51:06 PM UTC-4, Daniel LaLiberte wrote:

Sorry, I forgot to mention that you will need to use css to set the width of a column, if you can do it at all.  And you will need to do it not using any of the supported cssClassNames, since not apply to specific columns.

I suppose it would be easier for users if we provide more direct support for this kind of thing.

On Sun, May 7, 2017 at 7:39 PM, Daniel LaLiberte <dlali...@google.com> wrote:

Hi Jay,

You are setting the 0th row property, which is actually the first data row, not the header row.  If you set some other property, such as 'color', you will see that the property is being set properly for the data cell, and you can see (in the debugger) your width setting for the element as well. 

But even if you could set the width of the header column (a th element), this is not all you need to do to set the width of an html table.  There might be some interference with other settings for the table, and its containers, however.   It might be that we have broken the ability to set the column width of a table.   So, experiment with removing your 100% width option, or setting to a specific width, or 'auto'.  

Hope that helps.

On Sun, May 7, 2017 at 3:38 PM, Jay OCHS <in...@orangecountyhistoricalsociety.org> wrote: