Expense Dashboard
A dynamic expense tracking and visualization web application built with Google Apps Script and Google Sheets.
Overview
This project provides a responsive, interactive dashboard for analyzing expenses stored in a Google Sheet. It leverages Google Apps Script (server-side) and Chart.js (client-side) to fetch, process, and display transaction data by custom cycles (monthly, weekly, etc.).
Features • Aggregates expenses from a Google Sheet named statement_1 • Supports customizable cycles via getCycleKey (cycle start configurable) • Highlights top N categories (default 9) and groups remaining into “Other” • Interactive charts powered by Chart.js and chartjs-plugin-datalabels • Responsive design with CSS variables and Google Font “Inter” • Robust data cleaning, validation and error handling in server-side code • Easy customization of column mappings (COL_TRANS_DATE, COL_DESCRIPTION, COL_CATEGORY, COL_MONEY_OUT) and header rows
Prerequisites • Google Account with access to Google Sheets • A Google Sheet with transaction data, with at least the following columns: • Column D: Transaction Date • Column E: Description • Column H: Category • Column J: Money Out • (Optional) Node.js and npm for local development with clasp
Installation 1. Create or open your Google Sheet containing transaction data. 2. In the sheet, select Extensions > Apps Script to open the script editor. 3. Copy the server-side code from Google Apps Script/Code.js into the default Code.gs file or create a new file named Code.js and paste the contents. 4. In the script editor, create new HTML files matching the names in the repository and paste their contents: • index.html • Dashboard.html • Transaction Dashboard.html • any prototypes (e.g. expense dash.html, dashboard2.1.html) 5. (Optional) create a folder Teal Style Rad in the script editor and add CSS or asset files as needed. 6. Adjust configuration constants at the top of Code.js: • SHEET_NAME to match your sheet name • HEADER_ROWS if your sheet has more header rows • Column indices: COL_TRANS_DATE, COL_DESCRIPTION, COL_CATEGORY, COL_MONEY_OUT 7. Deploy the web app: • In Apps Script editor select Deploy > New deployment • Choose Web app, set Who has access as needed, and click Deploy • Authorize the script when prompted and copy the web app URL
Optional: local development with clasp • Install clasp: npm install -g @google/clasp • Authenticate: clasp login • Clone the script project: clasp clone <SCRIPT_ID> • Make changes locally and push with clasp push
Usage • Open the deployed web app URL in your browser. • View expense summaries by cycle, top categories breakdown, and detailed tables. • Check Apps Script logs under View > Logs for debugging.
File Structure • Google Apps Script/ • Code.js: server-side logic (Apps Script) • index.html: main dashboard template • Dashboard.html: legacy template • Transaction Dashboard.html: legacy template • expense dash.html: prototype layout • dashboard2.1.html: prototype layout • Teal Style Rad/: CSS variables and assets • README.md: this file
Contributing • Fork the repository and submit pull requests. • Report bugs and request features via GitHub issues. • Follow existing conventions for column mapping and cycle handling.
License
This project is distributed under the MIT License. See LICENSE for details.