Free Pie Chart Web App from Google Sheets – Apps Script

L3 is the third file in the learning series, and it answers a question that comes up as soon as anyone builds a dashboard in Apps Script: how do I draw a chart from the sheet, and how do I keep it drawing itself when the data changes? The answer here is a pie chart built with Chart.js that takes everything — the labels, the values and even the colour of each slice — from rows in a Google Sheet.

The sheet is the chart

Each row is one slice: a name, a number and a colour. Add a row with Blue, 456 and the colour blue, refresh the web app, and the slice is there. Nothing in the code needs touching, because the script reads down to the last filled row rather than a fixed range, so the chart grows with the data instead of quietly cutting it off.

Pointed at a named sheet

One detail worth understanding, and the walkthrough spends time on it: the script names the sheet it reads rather than grabbing whichever tab happens to be first. That is what lets the same workbook hold a dozen other tabs without any of them ending up in the chart by accident.

Size and titles

The chart lives in a canvas whose width and height sit in one place in the HTML. Change 400 to 800 and the chart is twice the size on the next refresh. The heading above it is plain text in the same file, so putting your own title there takes a second.

Learning, not just using

The code is short and commented for the reason the series exists — doGet returning the page, a function fetching the range, the labels, data and colours pushed into Chart.js. It is the piece you lift into a bigger dashboard once you can see how the three arrays get filled.