Grabbing a Chart as image via JS script and Google Sheets API? - javascript

I'm creating a Discord Bot that will grab a specified chart from a Google Sheet and send the chart to the server. The sheet on hand will only ever have one chart at a time, so I've been able to find the correct chartId as follows:
sheets.spreadsheets.get({
spreadsheetId: 'MYSPREADSHEETID'
}, (err, res) => {
if (err) return console.log('The API returned an error: ' + err);
var id = res.data.sheets[0].charts[0].chartId;
});
However, I cannot find out how to export the corresponding chart as an image, or find a unique URL to the chart, or even recreate the chart using the existing data. I'm using discord.js and Google Sheets API v4.

At the moment of this post, unfortunately it is not possible to retrieve a chart as an image or get its specifc URL with Sheets API. Here I present three workarounds when we encounter the issue of trying to retrieve the image of a chart in a spreadsheet.
Workaround 1
If your main intention is to get the chart data to then use it somewhere else or create a data Blob with it for other Google Applications, you can use the API method GET requesting only the desired fields (in our case, the chart objects) as shown in this example of the documentation.
Workaround 2
If what you need is to easily access this chart image with a simple link, you could publish your chart following these steps shown in the documentation. This can generate either a link or an embed for your website that you can easily share and use.
Workaround 3
You can use Apps Script to create a Web App and using the API method in the first workaround generate a Blob from the chart object and use it to be inserted as an image either in another sheet or in a HTML page. In this Stack Overflow answer you can see an exmple of the implementation of this workaround.
I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)

Related

How to pull data from one HTML page and use it on another using JS?

I am building a website with an articles page, and on the home page we have a featured article (The most recent one). When we upload a new article, we would like the one on the home page to update automatically.
So what I need to do, is use a JS function on page load, to then search the articles file for the article with the most recent date, and pull the data from this element and use it on the home page.
Are you going to have lots of articles published ? What is the frequency ?
In any of the case if you build simple API for retrieving articles then you can achieve your goal using below.
create a lighweight API to give you latest details about articles for e.g. HEAD /{category}/articles this might return latest articles ID.
Compare from step1 what articles Id you have retrieved before.
If from first step you get latest articles Id then fire another API to get article data using /{category}/articles/{articleId_retrieved_from_step2}
you can perform above steps in standard frequency based on your need using standard AJAX or simple polling frameworks. Refer this for more details https://javascript.info/long-polling
I will recommend to use SSE (Server Sent Event) which work without page refresh and continuous check the latest data in the database.
Please check the below link
https://www.w3schools.com/html/html5_serversentevents.asp

How can I parse a Google sheet using getJSON (or other way)?

I’ve a stupid question. Here’re two links:
https://docs.google.com/spreadsheets/d/1D1vL8EI0uRzeiGM-A8hZLgUCexXrocw5B_qTGnCekNE/pubhtml
And
https://spreadsheets.google.com/feeds/list/1D1vL8EI0uRzeiGM-A8hZLgUCexXrocw5B_qTGnCekNE/od6/public/basic?alt=json
When I open the first link in a browser, I can see a table itself, and when I open the second link, I can see some data in JSON.
What is the general rule of such a link conversion? Here are another link for example:
https://docs.google.com/spreadsheets/d/e/2PACX-1vS6D5wKWv4IfazLPFrphtG9lL4p4s4Zysmc40kGD22yqsaVhQXLef7M30DbwGT_MpNKHi5dplcQtB3d/pubhtml
How should I transform the link to get JSON? I’m going to use jQuery function getJSON to get the contents of a Google sheet. But what a URL should I give to the function?
And are there any other ways to access the contents of a table using JS?
Excuse me for my english!
You should try google sheet api for working with sheet
Google sheet api
Demo

How to plot a chart in the frontend using data from the backend with node.js?

My current situation is this:
I have a SQL database that I get my data from on the server side, and I want to show that data in a chart for the user, using Plotly. But I'm not sure how to approach this: should I pass the data to the frontend and make a chart there, or make the chart on the server side and try to change the content of the HTML?
Also, in the front end, I would like to use a external script, meaning I can't include plotly as a module, but maybe there is a way to do it?
And if I try to do it on the server side, how should I approach this passing the chart to the front end?
I'm fairly new to web development thing, trying to grasp the right concept of how data should be passed arround.
First you need to create an api, this api will serve x and y coordinates in array format.
Please refer following link https://plot.ly/javascript/getting-started/#hello-world-example (in this web-page click on js tab and see the "x" and "y" coordinates.)
Next make ajax call to above api and subscribe the response.

insert data to bigquery from gsheet

I would like to upload data to a table in bigquery from gsheet, I mean I want to upload the data with code and not with add on, because it will be scheduled later on.
Is there any code example that I can use for that for both ways (append and truncate)?
I have a 2 columns data that I want to load.
The columns are:
name lastName
josh big
john troble
May be some code using the following function
BigQuery.Jobs.insert(resource, projectId)
Looker is great on top of BigQuery and provides a very easy interface for embedding query results in google sheets (as well as excel).
http://www.looker.com/docs/sharing-and-publishing/publishing-looks-with-public-urls
note, I work at (and on) Looker, but I also love BigQuery
Here is a tutorial showing how to use Apps Script within a Google Spreadsheet to: (1) run a query and extract the results and put them into the spreadsheet, and (2) run a load job to import a file from Google Cloud Storage:
https://developers.google.com/apps-script/advanced/bigquery
Since that tutorial was written, BigQuery now supports inserting table rows directly through the tabledata.insertAll method:
https://cloud.google.com/bigquery/docs/reference/v2/tabledata/insertAll
If you want to upload some rows from a Google Spreadsheet into a BigQuery table, it looks like you can use Apps Script to insert the rows directly to BigQuery.
Another approach that should work: you can use Apps Script to create a file in Google Cloud Storage, then you can use example #2 from the first link above to load the data. The Google Cloud Storage API is accessible through Apps Script, so this should be possible. Here's a post showing how one user accomplished this step: http://ctrlq.org/code/20074-upload-files-to-google-cloud-storage
You might want to check Google BigQuery API in Apps Script
https://developers.google.com/apps-script/advanced/bigquery
Upload Job is to be used after you get data from gsheet
BigQuery.Jobs.insert

How do I download 100 images using Google Custom Search API for use with Processing?

A friend and I are trying to create a Photomosaic generator in Processing. We want to be able to pull 100 images from Google using the Custom Search API, restricting the image size and dominant color, along with few other things. We want to save these images so that we can process them in our program. We also want to use data that will come from the GUI to be used to build the API call, i.e the search keyword.
The following code snippet shows what parameters we want to constrain our image search with:
var searcher = new google.search.customSearchControl.getImageSearcher();
searcher.setRestriction(
google.search.Search.RESTRICT_SAFESEARCH,
google.search.Search.SAFESEARCH_STRICT
);
searcher.setRestriction(
google.search.customSearchControl.getImageSearcher.RESTRICT_IMAGESIZE,
google.search.customSearchControl.getImageSearcher.IMAGESIZE_MEDUIM
);
searcher.setRestriction(
google.search.customSearchControl.getImageSearcher.RESTRICT_COLORFILTER,
google.search.customSearchControl.getImageSearcher.COLOR_RED
);
searcher.execute(keyword);
We just aren't sure how to restrict the number of search results or what format the data returns in. Is it JSON?
This is if you are building a URL, and not doing it programatically.
To specify JSON as the return value, append &alt=json to the end of your request URL.
To limit the number of searches returned, use num=50 as one of the parameters
Source: https://developers.google.com/custom-search/v1/using_rest#query-params
The following page has all the documentation for the Google custom search API:
https://developers.google.com/custom-search/v1/overview
At a first glance I can see it's a JSON / atom api. So I guess probably the default return format is JSON and through content negotation you can also request atom (but again, please read the documentation to be sure).

Categories