Google sheet, apps script, webapp | Load and Display the chart by year selected from the List box

📁 Project type : Google Sheets / WebApp

🛠 Technology : Apps Script, HTML, CSS

📅 Update : 02/02/2026

👨‍💻 Author : NetMedia CCTV

Introduce

In this article, I will learn about the project "Load and Display Chart by Year Selected from List Box". With this project, you can easily load data from spreadsheet sheets and display it as a chart on the webapp platform. In particular, you can filter by year to load the chart. Below is the code and video tutorial to guide you through it.

Key features

✅ Data is retrieved from Google Sheets.
✅ Web-based interface.
✅ Data is loaded from Google Sheets into the web app in chart form.
✅ Select a year and display the chart by year.

Source code (Snippet)

Below is the main Apps Script code for processing the data:

function doGet() {
return HtmlService.createTemplateFromFile('loadchart')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1') 
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function getData(){
let ws = SpreadsheetApp.openById("10x6U6xZjDB4TQqZOo20OQsTPpER2lo49Cmas77TKxqI")
let ss = ws.getSheetByName('Data');
let dataset = ss.getDataRange().getDisplayValues()
let data1 = dataset.map(r => [r[1],r[2],r[3],r[4],r[5]])
let name = dataset.map(r => [r[0]])
let header = data1.shift()
let chosedata_year = ss.getRange("G2").getValue();  
let chosedata_month = chosedata_year -1;
Logger.log(data1)
//NAME USE CHOSE YEAR OF DATA TO SHOW ON CHART
return {name: name[chosedata_year],header: header, data:data1[chosedata_month]}
}

Download Sample File View WebApp Demo