javascript - Get as Image generates wrong image - Google App Script

Question

My goal is to create google documents using information from a google sheet with google app script.

I can generate a radar chart from the data in the google sheets. The radar chart looks like this:

radar chart looking all good

The issue: when I get the chart as a image and paste it to a google document. It looks all wrong. See picture and code.

radar chart not so good looking

My code :

var chart = sheet.newChart()
   .setChartType(Charts.ChartType.RADAR)
   .setPosition(8,2,0,0)
   .setNumHeaders(1)
   .setOption('title', title)
   .addRange(sheet.getRange("A1:G1"))
   .addRange(sheet.getRange("A2:G2"))
   .setMergeStrategy(Charts.ChartMergeStrategy.MERGE_ROWS)
   .setTransposeRowsAndColumns(true)
   .setOption('vAxes',{0: {viewWindow: {min: 0, max: 100}}})
   .setOption('series', {0: {lineWidth: 4, color: '#FFA500'}})
   .build();

sheet.insertChart(chart);
var image = sheet.getCharts()[0].getBlob().getAs('image/png');

The most recent similar post I found was this one: Automatting Radar Chart Generation in Google Doc using Google Apps Script

But no answer was given there. Hope someone can help.

EDIT: Thanks to Tanaike it's now working. For anyone wondering, this is the script I use to generate the chart and insert it into a google document. Replacing text with the chart.

var chart = sheet.newChart()
   .setChartType(Charts.ChartType.RADAR)
   .setPosition(8,2,0,0)
   .setNumHeaders(1)
   .setOption('title', title)
   .addRange(sheet.getRange("A1:G1"))
   .addRange(sheet.getRange("A2:G2"))
   .setMergeStrategy(Charts.ChartMergeStrategy.MERGE_ROWS)
   .setTransposeRowsAndColumns(true)
   .setOption('vAxes',{0: {viewWindow: {min: 0, max: 100}}})
   .setOption('series', {0: {lineWidth: 4, color: '#FFA500'}})
   .build();

sheet.insertChart(chart);

// workaround by Tanaike   
const slides = SlidesApp.create("temp");
const image = slides.getSlides()[0].insertSheetsChartAsImage(chart).getAs("image/png");
DriveApp.getFileById(slides.getId()).setTrashed(true);

var item = doc.getBody().findText("<text-to-replace>");
var r = item.getElement();
r.asText().setText("");
var img = r.getParent().asParagraph().insertInlineImage(0, image);

Answer 1

How about this answer?

Issue and workaround:

I think that this might be a bug. In this case, as a workaround, I use a Google Slides which can directly put the chart created with Google Spreadsheet. When the blob is retrieved from the chart put to the Google Slides, the blob is the same with the chrat on Google Spreadsheet.

Modified script:

When your script is modified, please modify as follows.

From:

var image = sheet.getCharts()[0].getBlob().getAs('image/png');

To:

const slides = SlidesApp.create("temp");
const imageBlob = slides.getSlides()[0].insertSheetsChartAsImage(chart).getAs("image/png");
DriveApp.getFileById(slides.getId()).setTrashed(true);
DriveApp.createFile(imageBlob);

• When imageBlob is created with DriveApp.createFile(imageBlob) as a file, the following result can be obtained.

Result:

When image and imageBlob are created as a file, the left and right images are obtained, respectively.

Note:

• If you want to put the correct chart image to Google Document using this workaround, please modify as follows.

    const slides = SlidesApp.create("temp");
    const imageBlob = slides.getSlides()[0].insertSheetsChartAsImage(chart).getAs("image/png");
    DriveApp.getFileById(slides.getId()).setTrashed(true);
  
    // This script puts the retrieved image blob to the Google Document.
    DocumentApp.openById("### Document ID ###").getBody().insertImage(0, imageBlob);
  

Reference:

• insertSheetsChartAsImage(sourceChart)