1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

Open in app

Search Write
Last chance: Become a member and get 25% off the first year (Ends 1/31)

How to create Chart from

Spreadsheet data using Google
Apps Script
Dilip Kashyap · Follow
6 min read · Oct 16, 2022

Image Source: Lucidchart

Hello Friends,

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 1/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

This article is going to be a step ahead in Google Apps Script. Now, we are
going to create chart from Google Spreadsheet data using Google Apps Script
and presenting it as HTML page to the browser with the help of Web API.

Using this method, you will be able to create charts dynamically from Google
Spreadsheets and present them on some platform without sharing your
Google Spreadsheet. When you update data in Google Spreadsheet, the chart
will update automatically as HTML webpage.

Let’s see these steps in order to create chart.

1. Create Google Spreadsheet with your data.

2. Read data from Google Spreadsheet using Google Apps Script.

3. Write HTML, JQuery and JavaScript code for the chart presentation.

4. Deploy and published Google Script as Web API

Step 1: Create Google Spreadsheet with data

Create Google Spreadsheet from drive and prepare your data as follows.

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 2/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

Google Spreadsheet with monthly sales data

Step 2: Read data from Google Spreadsheet using Google Apps Script
Once data prepared, you need to open Google Script editor by navigating on
menu as Extension => Apps Script

Now, just write script code for these two functions in the script editor file,
which is code.gs file—

1. doGet() function: This function to present your HTML file on the

browser.

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 3/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

2. getSales() function: This function is to read your sales data from Google
Spreadsheet and pass it to the chart template.

doGet(): Function will read index file and present it to the browser as HTML
file.

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index');

getSales(): To read the data from the Google Spreadsheet and passing it to
the getSale JavaScript function.

function getSales(){

var ss=SpreadsheetApp.getActiveSpreadsheet();

var salesSheet=ss.getSheetByName('Sheet1');
var getLastrow=salesSheet.getLastRow();

return salesSheet.getRange(2,1,getLastrow-1,2).getValues();

In the above function, we are taking active Google Spreadsheet by using

SpreadsheetApp.getActiveSpreadsheet() and reading sheet by name and
then taking all the rows and first two columns from the Google Spreadsheet.

Step 3: Write HTML, CSS and JavaScript code for the chart presentation
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 4/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

We required CDN in your HTML file. Next open your HTML file i.e
index.html and we will include the cdn for jQuery and Chartjs which we will
be using to make our chart.

<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
”></script>

<script
src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js”
crossorigin=”anonymous” referrerpolicy=”no-referrer”>

HTML code
Create a canvas for the rendering charts. In the next step we complete our
html code by adding canvas for displaying our chart inside a div element in
the body tag as written below:

<div style=’width:800px height:400px’>

<canvas id=’barchart’ class=’chartjs-render-monitor’></canvas>
</div>

JavaScript/JQuery
Adding the jQuery Script Code. We initially write the standard jQuery
method which is called when the screen is fully loaded with HTML code and
we call getSales() method inside it which we will be defining in the next step.

$(document).ready(function(){
getSales();
});

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 5/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

getSales(): Function, which is creating data and label from the Google
Spreadsheet data for the chart.

function getSales(){
google.script.run.withSuccessHandler(function(ar){
var data=[];
var label=[];
ar.forEach(function(item,index){
data.push(item[1]);
label.push(item[0]);
});
});
}

in the above code we called the following syntax, which used to call the
JavaScript function in Google Apps Script.

google.script.run.withSuccessHandler(function(ar)){
}.getSales();

Now, we are at last step, which complete JavaScript/ JQuery to generate

chart for us.

function getSales() {

google.script.run.withSuccessHandler(function (ar) {
var data = [];
var label = [];
ar.forEach(function (item, index) {
data.push(item[1]);
label.push(item[0]);
});
var barChartDiv =
document.getElementById("barchart").getContext("2d");

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 6/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

var barchart = new Chart(barChartDiv, {

type: "bar",
title: {
display: true,
text: "Monthly Sales in Rs.",
},
data: {
labels: label,
datasets: [{
label: "Monthly Sales in Rs.",
data: data,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255,99,132,1)",

"rgba(54, 162, 235, 1)",

"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",

"rgba(153, 102, 255, 1)",

"rgba(255, 159, 64, 1)",

"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",

"rgba(75, 192, 192, 1)",

"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",

],
borderWidth: 1,
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 7/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

},
],

},
options: {

legend: { display: false },

title: {
display: true,text: "Monthly Sales",},
},
});
}).getSales();
}

In the above code we are creating bar chart, you may choose anyone tpye of
chart as per your requirement.

After that, we have just get the data and label array and the called the canvas
element by using getElementById and then in the bar chart method we
passed all the required parameter such as —

data, label, background color, border color, title, type of chart, text etc…

Now, we will see the complete code for better understanding below.

Code.gs

function doGet(e) {

return HtmlService.createHtmlOutputFromFile('index');
}

function getSales(){
var ss=SpreadsheetApp.getActiveSpreadsheet();
var salesSheet=ss.getSheetByName('Sheet1');

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 8/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

var getLastrow=salesSheet.getLastRow();
return salesSheet.getRange(2,1,getLastrow-1,2).getValues();

Index.html

<!DOCTYPE html>
<html>
<head>

<base target="_top">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">

</script>
<script src=

"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"
crossorigin=" anonymous"
referrerpolicy="no-referrer">
</script>

</head>
<body>
<div style='width:800px; height:400px;'>

<canvas id='barchart'
class='chartjs-render-monitor'>

</canvas>
</div>
<script>

$(document).ready(function () {
getSales();
});

function getSales() {
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 9/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

google.script.run.withSuccessHandler(function (ar) {
// console.log(ar);
var data = [];

var label = [];

ar.forEach(function (item, index) {

data.push(item[1]);
label.push(item[0]);
});

var barChartDiv = document.getElementById(

"barchart").getContext("2d");

var barchart = new Chart(barChartDiv, {

type: "bar",
title: {

display: true,
text: "Monthly Sales in Rs.",
},

data: {
labels: label,

datasets: [{
label: "Monthly Sales in Rs.",
data: data,

backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",

"rgba(255, 206, 86, 0.2)",

"rgba(75, 192, 192, 0.2)",

"rgba(153, 102, 255, 0.2)",

"rgba(255, 159, 64, 0.2)",
"rgba(255, 99, 132, 0.2)",

"rgba(54, 162, 235, 0.2)",

"rgba(255, 206, 86, 0.2)",
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 10/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

"rgba(75, 192, 192, 0.2)",

"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",

],
borderColor: [
"rgba(255,99,132,1)",

"rgba(54, 162, 235, 1)",

"rgba(255, 206, 86, 1)",

"rgba(75, 192, 192, 1)",

"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",

"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",

"rgba(255, 206, 86, 1)",

"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",

"rgba(255, 159, 64, 1)",

],
borderWidth: 1,

},
],

},
options: {
legend: { display: false },

title: {
display: true,
text: "Monthly Sales",

},
},

});
})
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 11/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

.getSales();

}
</script>

</body>
</html>

Step 4: Deploy and published Google Script as Web API

Now, deploy this script as Web API from the script editor as shown below. Go
to New deployment and published as Web API from the shown options

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 12/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

Output

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 13/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

Sales Data presentation using Bar Chart

I hope you find this article helpful. For more such articles please upvote,
follow and share this with friends.

If you are interested to learn Google Apps Script and automate your Google
Workspace ? must try this e-Book on “Google Apps Script: A Beginners
Guide”

Happy Learning … 😁✌️

I’m available for freelance opportunities and you may reach out via email at
[email protected] for further collaboration.

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 14/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

Google Apps Script Web Api Development Charts Google Spreadsheets

Automation

Written by Dilip Kashyap Follow

397 Followers

My goal is to share solutions to the problems I have encountered during software

programming.

More from Dilip Kashyap

GitHub Copilot code suggestions

Jacob Bennett in Level Up Coding

The 5 paid subscriptions I actually

use in 2024 as a software engineer
Tools I use that are cheaper than Netflix

Dilip Kashyap

How to add Google Sign In button

to your Website
Hi Friends,
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 15/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

3 min read · Sep 13, 2022 · 5 min read · Jan 5

74 5.2K 62

Google’s Unexpected Layoff Warning Email The 10 Best VS Code Extensions in 2023
Sent to everyone
Dilip Kashyap
Alexander Nguyen in Level Up Coding
The 10 Best VS Code Extensions in
2023
Google’s Unexpected Layoff In the fast-evolving landscape of software
Warning Email Sent to everyone development, Visual Studio Code (VS Code)…

No one is safe.

· 3 min read · Jan 20 5 min read · Nov 9, 2023

1.5K 25 57

See all from Dilip Kashyap

Recommended from Medium

App Script For Google Sheets: The Ultimate Fetching data from Google Sheets using
Tutorial [Examples] Apps Script

Upgrade With AI Niranjanhebli

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 16/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

App Script For Google Sheets: The Fetching data from Google Sheets
Ultimate Tutorial [Examples] using Apps Script
Learn Google Apps Script and unleash the One of the most potent capabilities of Google
true potential of Google Sheets. Sheets is its ability to interface with a myriad…

3 min read · Aug 5, 2023

8 min read · Aug 24, 2023

18

Lists

Coding & Development Image The New Chatbots: ChatGPT,

11 stories · 408 saves by Bard, and Beyond
j i 12 stories · 285 saves

ChatGPT prompts blac Interesting Design Topics

AI Pin
36 stories · 1042 saves as and 220 stories · 353 saves
h hi

How to Convert Google Sheets to a Google Sheets as a Relational Database

Lightweight and Self-running Database with
Google Apps Script (2) Shambhavi Jahagirdar in VLEAD-Tech

Henry Wu

Google Sheets as a Relational

Database
How to Convert Google Sheets to a
Sheets are used to store tabular data in day-
Lightweight and Self-running… to-day work life. This data storage system ca…
Previously

9 min read · Dec 26, 2023 9 min read · Aug 19, 2023

1 5

Lalamove Scheduled Order with Gsheet and Previewing Links with Smart Chips: The
App Script Untold Potential of Apps Script
https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 17/18
1/30/24, 11:16 AM How to create Chart from Spreadsheet data using Google Apps Script | by Dilip Kashyap | Medium

Javent Lienata Dmitry Kostyuk in JavaScript in Plain English

Lalamove Scheduled Order with Previewing Links with Smart Chips:

Gsheet and App Script The Untold Potential of Apps Script
This article will talk about how to create
Lalamove delivery order using Gsheet and…

6 min read · Oct 19, 2023 · 8 min read · Aug 8, 2023

173 55

See more recommendations

https://dilipkashyap15.medium.com/how-to-create-chart-from-spreadsheet-data-using-google-apps-script-89f2a654fc8d 18/18