Resize Charts made by App Script on google site - google-apps-script

I created a line chart using app script and inserted it on google site, it shows up fine on google site as the following screenshot, but I am just wondering if I could resize the chart to make it bigger so that all legends (e.g: store F) will fully show up. (It's like I could drag the chart and make it big in excel)
Here is the part of the code I used (copied from a tutorial) and changed a bit, I tried to use .setOption to change the width but nothing happened.
var chart = Charts.newLineChart()
.setDataTable(dataTable)
.setTitle("Testing Chart")
.setOption("width",1000)
.build();
var app = UiApp.createApplication().setTitle("Testing Chart");
app.add(chart)
return app;
In terms of inserting the app script into google site, I did set up the width of "app script gadget" to 100% so I guess this is not the issue. Any advice would be greatly appreciated!
Thanks!

Going through the docs, you should try changing setOption() to be like:
.setOption("theme", "maximized")
maximized from the docs (in line with theme):
Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. Sets the following options:

Related

Google Apps Script getText + replaceText from text box inside drawing in Google Docs Impossible?

I'm trying to edit an Avery template in google docs and populate it with information form a google sheet Via Google Apps Script.
I already body.replaceText to replace the placeholder text in the doc:
for (var i in data) {
var row = data[i];
var docid = DriveApp.getFileById(templateid).makeCopy().getId();
var doc = DocumentApp.openById(docid);
var body = doc.getActiveSection();
body.replaceText("%NAME%", row[0]);
body.replaceText("%ADD_LN1%", row[1]);
body.replaceText("%ADD_LN2%", row[2]);
The label template is a table with a drawing oval in each segment and I have inserted a text box inside the The problem i'm having that I have a text box inside the oval drawings in the doc (I need the oval drawings to know where the labels will print)
The placeholder text inside the drawing will not change when I run my script, but any test inside the table or on the page normally will change to the Google sheets information.
Here is the label template I am using: Label Page
I have placed the %NAME& tag in the header, on the image and on the image that is formatted to freeze in place on page (Just in case that changes anything!)
Purpose: I have a google sheet populated with customer name address and custom choices (specific safety information to print onto a label)
I then have this script insert the info into the label doc, then i can print it without having to create them from scratch every time manually.
If there isn't a way to get text / replace text that is within drawing-shape-text, is there a way I can use the circular shape as a table of as guidelines so that I can transfer across the data as standard?
If you need any more info please let me know, I'm very green and very confused.
Thank you in advance for anyone taking the time to read through this!
Unfortunately, in the current stage, there are not methods for directly modifying the texts in the drawing in the methods of Google Apps Script.
From user - Tannaike
Google slides has the function I was looking for.

Image crop with AppScripts in Sheets or Drive

I am evaluating Google Sheets with AppScripts for a report generator. The requirements include inserting images from Google Drive. One of the input image has a fix format, which I need to crop. ( So the dimensions of the original image and the dimensions of the crop is known.)
I am looking for a solution to achieve this outcome, but I am struggling. I looked into the following methods:
No image crop function in the Drive API
No image crop ( only resize) for the Sheets OverGridImage object
No image crop for the =IMAGE() function
Manually you can create a drawing, add an image and crop it:
But you can't do this from AppScripts
You can't access the image within the drawing as an OverGridImage object. ( Which would allow you to replace it's image.)
You can use the Slides API replace(imageUrl, crop)
Is it possible to embed/link the slide into the sheet via AppScript?
Is there any other workaround? ( Even if it means creating a new file in drive?)
EDIT: Obviously there is the solution to call an external API, or to use GCP services such as CloudFunctions ( which are not free). However I am hoping for an AppScript solution. ( Or using a compatible JS library.)
I believe your goal as follows.
You want to achieve the crop of image using Google Apps Script.
Issue and workaround:
Unfortunately, in the current stage, there are no methods for directly cropping image using Google Apps Script. This has already been mentioned by your comment. So in this answer, I would like to propose a workaround for cropping image using Google Apps Script.
In this workaround, I use Microsoft Powerpoint and Google Slides. The flow of this workaround is as follows.
Create Microsoft Powerpoint (PPTX data) by setting the page size.
In this case, the width and height of the image left by the crop are set. This is used as a window of image.
When the converted PPTX data is unzipped, the data can be analyzed as the XML data. Fortunately, at Microsoft Docs, the detail specification is published as Open XML. So in this case, Microsoft Docs like XLSX, DOCX and PPTX can be analyzed using XmlService of Google Apps Script. In this workaround, the PPTX data is directly created by including the page size. I think that this method will be also useful for other situations.
When the method of "presentations.create" of Slides API can be correctly used, this is not required. Ref
Convert PPTX data to Google Slides.
Insert the image, that you want to do the crop, to the created Google Slides.
At that time, the crop of "top" and "left" is subtracted from the origin of coordinates. Because the origin of coordinates of Google Slides is the upper-left corner.
The thumbnail image is retrieved using the method of "presentations.pages.getThumbnail" in Slides API.
By above flow, the cropped image can be retrieved as a blob.
In this sample script, an image is cropped using the parameters using Google Apps Script. In this case, the script reflecting above flow is a bit complicated. So here, I would like to introduce the sample script using a Google Apps Script library. Ref Of course, you can see the whole script there.
Sample script:
Before you use this script, please install ImgApp of the Google Apps Script library. Ref And in this case, please enable Drive API and Slides API at Advanced Google services.
function myFunction() {
const id = "###"; // If you want to crop the image on Google Drive, please set the file ID of the image here.
const object = {blob: DriveApp.getFileById(id).getBlob(), crop: {t: 50, b: 100, l: 200, r: 100}};
const blob = ImgApp.editImage(object);
DriveApp.createFile(blob);
}
This sample script crops an image on Google Drive and the cropped image is created to the root folder.
crop: {t: 50, b: 100, l: 200, r: 100} means that the crop size of t, b, l and r are the top, bottom, left and right, respectively. The unit is pixel.
About the maximum image size, you can see it at Limitations for Inserting Images to Google Docs. In this sample script, 25,000,000 pixels^2 is the maximum size of the image.
References:
Understanding the Open XML file formats
XML Service
editImage() in ImgApp

Google Sheets Hide Images When Hiding Rows

I have been trying to figure out a way to hide an image in google sheets when I am hiding rows that include the image.
The image is a button that has a script attached to it, which means that I cannot just use the =IMAGE() formula, and cannot use an image inside of a cell either.
The problem is that when I hide rows the image stays. Is there any way to get around this?
Answer:
Unfortunately, there is no way of doing this.
More Information:
Images in a Google Sheet that are not inserted using the =IMAGE() formula, nor by inserting the image directly in a cell, are represented by an OverGridImage object in Google Apps Script.
As you can see in the documentation for this class, there exists no method which allows you to hide the image, other than deleting it altogether.
The reason that hiding cells/rows/columns does not hide the image either, is because the image is not tied to any indvidual cell, row or column - it is inserted over the grid system of a specific sheet.
A Mix of Both Good and Bad News:
Now, in theory, what you could do instead, is store the information about the image in the script properties, and then delete/insert the image again when you wish to hide it.
Unfortunately, it appears that the .getUrl() method of the aforementioned OverGridImage class is bugged and does not return the URL of the image - this is something that I have checked myself.
In this case, I would suggest going to the issue link for this bug and hit the ☆ next to the issue number in the top left to let Google know that more people need this to be seen to.
I would also suggest filing a Feature Request with Google here, detailing that you would like to see the showing and hiding of overlay images implemented in Google Apps Script. The above link is directly for Apps Script feature requests.
And for future readers: If you are encountering this, and the .getUrl() method has been fixed, then you can use the following functions as a workaround to show and hide images. This uses PropertiesService to save the image data into the script's properties, and then uses them to re-insert the image after deletion.
function hideImage() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var image = ss.getImages(); // assuming this is the only image
var url = image[0].getUrl();
var col = image[0].getAnchorCell().getColumn();
var row = image[0].getAnchorCell().getRow();
var xOffset = image[0].getAnchorCellXOffset();
var yOffset = image[0].getAnchorCellYOffset();
var details = [url, col, row, xOffset, yOffset];
console.log(details);
PropertiesService.getScriptProperties().setProperty("image", details.toString());
image[0].remove();
}
function showImage() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var details = PropertiesService.getScriptProperties().getProperty("image").split(",");
// change for your sheet name
ss.getSheetByName("Sheet1")
.insertImage(details[0], details[1], details[2], details[3], details[4])
}
References:
Class OverGridImage | Apps Script | Google Developers
OverTheGrid Image getUrl() seems to not working - Google Issue Tracker
Google Apps Script Feature Request Form - Google Issue Tracker
Class PropertiesService | Apps Script | Google Developers
insertImage(url, column, row, offsetX, offsetY) - Class Spreadsheet | Apps Script

Looking for an example how to create Bubble Chart inside the Spreadsheet programmatically on Apps Script

I am looking for an example how to create an embedded Bubble Chart inside the Spreadsheet programmatically on Apps Script or to edit (apply options) an existing embedded Bubble Chart (ideally to see both examples of code)
Google Chart Gallery provides an example for a standalone web app.
Spreadsheet: Class EmbeddedScatterChartBuilder shows examples how to create embedded charts except the Bubble Chart!
Charts.ChartType doesn't have BUBBLE value!
Or maybe possible to use EmbeddedScatterChartBuilder to create a Bubble Chart? If so could somebody provides such an example of code please.
What I want: I want to control Size and Colour of Bubbles and also I want to Series to show Ids (but it doesn't accept range with strings - only numbers!)
colorAxis: {
Values: [0,1,8,15],
colors: ['white', 'green','yellow','red']
},
sizeAxis: {
minValue: 0,
maxSize: 30
},
hAxis: {
title :'Deadline',
ticks: [{v:0, f:'now'},{v:1, f:'soon'},{v:2, f:'approaching'},{v:3, f:'Distant'}],
min: 0,
max: 3
},
And why Google doesn't provide EmbeddedBubbleChartBuilder?
I found that Old version of the Chart Editor provides the opportunity to apply colours manually for series:
This is the best result which I reached manually customise a Bubble Chart in the Old Chart Editor. This is what I would like to create programmatically (or with formulas in a sheet:
But when I scale down the Chart I see such a picture:
UPDATE
As of April 11, 2018, Google Sheets now officially supports Bubble Charts.
See change log.
I think your best bet is to look for analogs between the Apps Script APIs and the example code used to embed charts that can be found in the chart gallery.
The EmbeddedScatterChartBuilder class has a method called setOptions that is used to set advanced options. These options probably correspond to options variable listed in the sample code you linked to in the Chart Gallery. So looking at the samples you linked to there are options such as bubble and colorAxis that you should be able to pass to the setOptions method.
Here's a full list of advanced configuration options taken from the same page you linked to in your question:
https://developers.google.com/chart/interactive/docs/gallery/bubblechart#configuration-options
Try them out and see what works.

Printing google maps in black and white

A lot of my clients(companies) want to print google maps (with directions) on b/w printers. But when we tried to do this - maps became agly because google maps has litle contrast and small resolution. As a result - everething on map isn't clear visible. We tried all possible settings of the printer and nothing couldnt help.
How to solve this programly? How make google maps (with routs on it) contrast ang good resolution?
Try reading the Styled Map section of the Google Maps API. They even have a wizard that could help you create a grayscale map.
Not a direct answer but something that indirectly solved the problem for me.
Overview - use freeware image editor 'IrfanView' to 'flatten' the image to b/w, using a custom threshold (not supported in standard IrfanView).
copy the map image from Google maps to the clipboard
paste into IrfanView
install the free 'threshold' plugin into IrfanView
3.1) Download FineThreshold from http://www.mehdiplugins.com/english/finethreshold.htm
3.2) Unzip it and save it in a known location.
3.3) In IrfanView, go to Image / Adobe 8BF Plugins / Filter Dialogs.
Use 'Add 8BF filters' (file) to locate and load the filter.
Use 'start selected filter' to invoke the actual filter.
Note the 'ok/cancel' buttons remain grayed out but work.
I found ~228 was a good threshold value for Google Maps. Just slide around that mark, and see when the background switches from black to white. You have to hit 'ok' for each value to see the impact. Then you have to exit the plugin to return to the main IrfanView window.
Try http://www.openstreetmap.org , select cycle map (on stack top right). Labels are slightly bigger than on Google, contrast is better (still not great)
this looks better fit for your need
https://snazzymaps.com/style/79/black-and-white
you can print with markers and labels also.