2

I'm trying to modify the format of the Table Chart that I've added to a Google Slide.

I've found that the setOption would be the function to use to achieve this but I haven't been able to validate if the following attributes can be modified:

  • Header color
  • Text Alignment
  • Text Wrapping: Wrap

This reference indicates that we have the following configuration options here.

In there cssClassNames gets mentioned as

An object in which each property name describes a table element, and the property value is a string

I've tried to apply that to my code:

function TablesConstructor(){
  //slide_obj is an object that contains all the information needed.
  //Let's open the file
  var slide_file = SlidesApp.openById("your_slide_id");
  
  //Get the Slides
  var slides = slide_file.getSlides();
  var slide_elements = slides[0].getPageElements();
         
  //Create Data Table chart
  var table_data = Charts.newDataTable()
  .addColumn(Charts.ColumnType.NUMBER, "Col1")
  .addColumn(Charts.ColumnType.NUMBER, "Col2")
  .addColumn(Charts.ColumnType.NUMBER, "Col3")
  .addColumn(Charts.ColumnType.NUMBER, "Col4")
  
  //Populate data table chart with the 2D array inside my object   
  for(var i = 0; i < 4; i++){
    table_data.addRow([(i + 1),
    (i + 2), 
    (i + 3), 
    (i + 4), 
    );
  }
  
  var cssClassNames = {
    headerRow: 'italic-darkblue-font large-font bold-font'
  };
  
  //Build the table
  var table_chart = Charts.newTableChart()
  .setOption('cssClassNames', cssClassNames)
  .useAlternatingRowStyle(false)
  .setDataTable(table_data)
  .setDimensions(720, 480).build();

  slide_elements[0].asShape().replaceWithImage(table_chart.getAs('image/jpeg'));
 
  slide_file.saveAndClose();  
}

How should the cssClassNames parameter be used to change its text color, background color? It looks a little different than the regular CSS I know. Or is there another method to modify the table format?

enter image description here

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Luis Alberto Delgado de la Flo
  • 1,914
  • 4
  • 16
  • 43
  • Just to add and test it out myself, how do you construct the object? How do you call `TablesConstructor()` I'm curious about the `slide_obj` – David Salomon Feb 24 '22 at 00:24
  • @DavidSalomon I've modified the script so that we don't need to know the object details and so that we can replicate the scenario more easily. I've also found about the `cssClassNames` parameter. Probably this is the way to modify the table. – Luis Alberto Delgado de la Flo Feb 24 '22 at 01:59
  • Indeed `setOptions()` doesn't have `colors` as a parameter – David Salomon Feb 24 '22 at 02:40

1 Answers1

3

the method for setting cssClassNames appears to be correct,
and works fine in a typical html example, as follows...

just make sure your css is available somewhere on the page...

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Category', 'value'],
    ['a', 2924],
    ['b', 2075],
    ['c', 2516],
    ['d', 2153],
    ['e', 2348],
    ['f', 1925]
  ]);
  var container = document.getElementById('chart');
  var chart = new google.visualization.Table(container);
  chart.draw(data, {
    cssClassNames: {
      headerRow: 'italic-darkblue-font large-font bold-font'
    }
  });
});
.italic-darkblue-font {
  color: darkblue;
  font-style: italic;
}

.large-font {
  font-size: 24px;
}

.bold-font {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • Thanks! This particular process works with Google Sheets, Slides and Apps Script. I'll go ahead and investigate if tis possible to add a CSS file so that my GAS can go ahead invoke it. I'll test it in a couple hours and come back with an update! – Luis Alberto Delgado de la Flo Feb 24 '22 at 16:40