Google Apps script: Spreadsheet to Chart to Image - google-apps-script

Question

I've created a function to take spreadsheet data, bring it to GAS, and then send it out to a webhook so I can use Zapier to build an image/pdf/etc. I used others samples and help on Google to figure out how to get the range, bring it over, etc and that's here:
const range = "Prior!H20:K23";
const [header, ...values] = SpreadsheetApp.getActiveSheet()
.getRange(range)
.getDisplayValues();
const table = Charts.newDataTable();
header.forEach((e) => table.addColumn(Charts.ColumnType.STRING, e));
values.forEach((e) => table.addRow(e));
const blob = Charts.newTableChart()
.setDataTable(table.build())
.setDimensions(500, 150)
.setOption("alternatingRowStyle", false)
.build()
.getBlob();
I then send the blob out, etc. The problem is that I'm losing all of the formatting from the spreadsheet, and since what I really want to do is almost just take a screenshot of the range in question, it's a problem. Specifically I'm losing text attributes, coloring, and the merging of cells.
Any ideas of how to do this, or, where in here I could modify/bring over the formatting?

Answer 1

There is no quick way to get a spreadsheet range with formatting through the SpreadsheetApp API.
See Tanaike's RichTextApp for one pretty simple method of getting formatted text content in a range of cells. The library that uses a temporary document to get the formatting.
To get a chart, complete with formatting, try .build().getAs('image/png') or 'image/svg' instead of .build().getBlob(). See Charts reference.
Alternatively, use Sheet.newChart() to get an EmbeddedTableChartBuilder instead of a TableChartBuilder.

Answer 2

You will need to extract formatting info from the sheet and feed it into the table builder
(Disclaimer, even by doing this you won't be able to do it with Apps Script, see below)
Especially if you use
.getDisplayValues();
Which will only get the values displayed from the sheet, no formatting information is taken from the sheet with this method.
You can use:
.getRichTextValues()
Though unfortunately a RichTextValue, is not recognized by the chart builder.
So the best thing is to break it up into a few steps, the first of which is using:
value.getTextStyle()
Which will then return a TextStyle object that has a few methods:
getFontFamily()
getFontSize()
getForegroundColor()
getForegroundColorObject()
isBold()
isItalic()
isStrikethrough()
isUnderline()
So now you can store the various formats you need to apply to your table.
However, the Apps Script Charts Service does not support this styling!
It seems that the Apps Script Chart Service does not support this type of styling. So maybe your only option is to open an HTML UI element via the UI service, or a Web app and then use the Google Charts service in the way demonstrated by the quickstart https://developers.google.com/chart/interactive/docs/quick_start.
You would need the setCell method.
This involves translating your styling to CSS, for example:
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
// https://developers.google.com/chart/interactive/docs/reference#DataTable_setCell
File a feature request
You can always file a feature request for that by filling out this template:
https://issuetracker.google.com/issues/new?component=191640&template=823905
In the meantime though, you are probably best to get to grips with the JS library as it will always tend to be more complete than the Apps Script service that wraps it.
That, or build an HTML table without using Google Charts, then you could potentially use the HtmlService to pass it around in that format.
References
RichTextValue
DataTableBuilder
TableChartBuilder
UI service
Web apps
Charts
HtmlService