Changing cell font or color with setProperty for Table

[Ambientson]

Hi,

I am struggling to get the setProperty method of DataTable to work to change font or color of a table cell (or anything in a table cell for that matter). See code below:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes'],
    ['Tong Ning mu', 174, true],
    ['Huang Ang fa', 523, false],
    ['Teng nu', 86, true]
  ]);
  
  //data.setProperty(1, 1, "color", "red");
  //data.setProperty(0, 1, "background-color", "blue");
  //data.setProperty(2, 0, "style", "font-style:bold;");
  data.setProperty(1, 1, 'style', 'background-color: red;');

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data);
}

Code taken from Google Code Playground and edited.

Thanks.

[asgallant]

You need to set the "allowHtml" option to true, eg:

visualization.draw(data, {
    allowHtml: true
});

[Ambientson]

Thanks, I hadn't noticed that.

Cheers.

[Ambientson]

Actually, I had the allowHtml in my code but not in the example I provided. I think my issue is more related to setting properties on a column.

The following statement works (as you pointed out):

data.setProperties(1, 1, {style: 'font-style:italic; font-size:10px;'});

But not this one (which is the one in my current code):

data.setColumnProperties(1, {style: 'font-style:italic; font-size:10px;'});

Any ideas why?

I'm having a hard time finding information on which properties are supported for various elements (row, column, cell, etc.). My objective is to change the font of an entire column to make it smaller and in italic.

Thanks.

[Ambientson]

Hmmm... found an answer on a previous post but for a row:

<quote>The Table visualization doesn't use any row properties.  You have to set the style property for each cell in the row.</quote>

If it's the same thing for columns, it would explain it.

Is it the same for columns?

Thanks.

[asgallant]

Yup, same for columns.

[asgallant]

The available properties are listed in each visualization's documentation; the Table's are here: https://developers.google.com/chart/interactive/docs/gallery/table#customproperties

[Ambientson]

Thanks.

For most of the properties, you're right, I can get them through the docs but what about table cell properties?

When I was looking for row, column and cell properties I was having a hard time (now I know that row and column don't have any, except for special cases such as header row or odd/even). But what about cell properties? Are they strictly html attributes hence why they are not documented?

Cheers.

[asgallant]

The available properties are listed right there: className and style, that's it.

[Ambientson]

Right, got it. Thanks.

I realize my question was more in regards to the style property but that is defined within CSS or html docs. I now understand.

Another question in regards to tables. Is there a way to specify the width of a column through another mechanism since column properties are not supported?

I know there are width and height properties to the table but any way we can make one column more narrow than the others?

Again, many thanks for the help.

[asgallant]

You *may* be able to control column width, but it is subject to the vagueries of CSS.  Set the width on a cell in the column, and you might see it drawn that way.  CSS interpretation could work against you, or the browser could decide that the cell is too narrow, or something to that effect, and you could end up with a wider cell than you want.  If that happens, though, it's not the Visualization API making it happen.

[Ambientson]

Got it. Thanks.

It seems to me like the table chart type is less "complete" than the other Google Viz chart types.

[asgallant]

My understanding is that the Table is very old, and hasn't been updated in a long time.  There are a number of bugs floating around inside the code awaiting fixes for a long time.  Fixing it hasn't been a priority of the Viz team up to now, though, as there are much more interesting things being done with the other visualizations.