Host a static HTML KPI dashboard from Google Sheets with CustomJS

Name: Host a static HTML KPI dashboard from Google Sheets with CustomJS
Availability: InStock
Author: CustomJS

Host a static HTML KPI dashboard from Google Sheets with CustomJS preview

Open on n8n.io

$20/month : Unlimited workflows

2500 executions/month

Try free

THE #1 IN WEB SCRAPING

Scrape any website without limits

Try free

HOSTINGER

Early Deal
DISCOUNT 20%

Self-hosted n8n

Unlimited workflows - from $4.99/mo

Try free

#1 hub for scraping, AI & automation

6000+ actors - $5 credits/mo

Try free

Overview

Hosting a static HTML KPI dashboard with CustomJS

This workflow demonstrates how to automatically generate a weekly KPI dashboard from Google Sheets and host it as a live static HTML page using CustomJS.

Instead of manually building and updating dashboards, the workflow fetches KPI data, transforms it into JSON, and generates charts, tables, and KPI cards automatically. The hosted HTML page can be connected to a custom domain with one click.

The result is a fully interactive, production-ready KPI dashboard that updates weekly with minimal effort.

Why This Workflow?

Creating dashboards manually or passing raw sheet data to visualization tools is:

time-consuming
error-prone
hard to automate

This workflow automates the process by converting sheet data into structured JSON and feeding it directly into a CustomJS HTML template, generating charts and tables automatically.

What This Workflow Does

Fetches KPI metrics (Visitors, Leads, Demo Booked, Proposal Sent, Won) from Google Sheets
Aggregates metrics by week and channel
Converts the structured data into JSON for dashboard consumption
Generates a static HTML page with KPI cards, charts, and tables
Hosts the HTML page on CustomJS, optionally connected to a custom domain

All without manual intervention.

Key Features

Automated KPI Dashboards Generate charts, tables, and KPI cards from Google Sheets data
Static HTML Hosting Live dashboards are instantly deployable and accessible anywhere
Custom Domains Connect your own domain with a single click
Interactive Charts Uses Chart.js for bar and line charts, fully responsive
QR Code Ready Optional QR code generation for sharing dashboard links
Token-Efficient Only structured JSON is processed, no large unnecessary payloads

How It Works

Manual or Scheduled Trigger Run the workflow on demand or weekly
Load Data from Google Sheets

Pull metrics for the desired period
Aggregate weekly or by channel

Prepare Structured JSON Format sheet rows into structured JSON for the dashboard
Generate HTML Dashboard Feed JSON into a CustomJS HTML template node Automatically builds KPI cards, charts, and tables
Host Static HTML

Deploy instantly via CustomJS
Optional: connect a custom domain
Each update overwrites the previous dashboard

Optional Enhancements

Generate QR codes for the dashboard link
Include multiple charts, historical trends, or multiple sheets

CustomJS

18 workflows

Complexity

intermediate

Published 20 Feb 2026

Likes 0

View on n8n.io Download Workflow

Install path: /data/workflows/13545/13545.json

Share Your Workflow

Have a useful automation to share? Publish it and help the community.

Submit Your Template How to Submit

Related Workflows

Create fillable document templates from PDF or DOCX with GPT-4o and Google Drive

## 📄Template Creator ### How it works This workflow accepts any uploaded document (PDF or DOCX) via webhook and automatically converts it into a reusable fill-in-the-blank template. **Step 1 — Identify:** GPT-4o first reads the document and determines the document type (e.g., Employment Contract, Invoice, NDA, Lease Agreement, Project Proposal) and the specific variable fields that type of document typically contains. **Step 2 — Templatize:** A second AI pass uses the identified document type and field list to replace all variable content with clearly labeled `[BRACKET]` placeholders while preserving all static boilerplate and structure verbatim. **Step 3 — Deliver:** The cleaned template is rendered to PDF via Gotenberg, uploaded to Google Drive, made publicly accessible, and a JSON response with file URLs is returned to the caller. ### Setup 1. Configure the **Webhook** path if needed (default: `general-template-creator`) 2. Set your **OpenAI** credential on both LLM nodes 3. Set your **Google Drive** credential and confirm the target folder ID in the Upload node 4. Confirm the **Gotenberg** URL matches your self-hosted instance 5. Install the community node `n8n-nodes-word2text` (see ⚠️ warning sticky) ### Customization - Swap GPT-4o for GPT-4.1 or GPT-4.1-mini on the Identify node to reduce cost on the lighter classification task - Add a Switch node after identification to route different document types to type-specific prompts - Modify the Drive folder ID to sort templates into subfolders by document type Document accepts input from a form such as the one found here: [Sample Form](https://iportgpt.com/n8n_assets/template_creator_form.html)

View

Generate PDF pricing proposals from Excel with Gotenberg and Outlook

## How it works 1. **Webhook Trigger** — A web form POSTs prospect details, selected services, discount level, and requestor info to the webhook endpoint. 2. **Fetch Pricing Sheet** — Retrieves all rows from your `pricing_request.xlsx` Excel table in OneDrive/SharePoint. 3. **Process & Price** — Filters the pricing rows to the selected services, applies the correct Discount / Retail / Premium price tier, and calculates the total. 4. **Build HTML** — Renders a fully branded HTML proposal document with cover info, line-item pricing table, terms, and a signature block. 5. **Convert to PDF** — Sends the HTML to a self-hosted [Gotenberg](https://gotenberg.dev) instance, which returns a print-ready PDF. 6. **Email Proposal** — Delivers the PDF as an attachment via Gmail OAuth2 to the requester and any internal recipients you configure.

View

Classify and route email attachments with easybits, Gmail and Google Drive

## What This Workflow Does Receive any business document via email. The attachment is automatically **classified** (Invoice, Contract, or Purchase Order) using easybits Extractor, then **routed** down the correct path where a second Extractor pulls out document-specific data. Each route stores the file in Google Drive and triggers the appropriate action – Invoices go to a finance spreadsheet, Contracts and Purchase Orders trigger Slack notifications. ## How It Works 1. **Receive** – Gmail polls for new emails with attachments every minute 2. **Classify** – easybits Extractor identifies the document type and returns a class label 3. **Route** – A Switch node sends the item down the matching path (Invoice / Contract / PO) 4. **Merge Binary** – The original file is merged back into the routed item (classification strips the binary) 5. **Extract** – A second easybits Extractor pulls fields specific to that document type 6. **Merge Data + File** – Extracted JSON and original binary are combined for upload 7. **Store & Notify** – The file is uploaded to Google Drive; Invoices update a spreadsheet, Contracts and POs trigger Slack alerts --- ## Setup Guide ### 1. Create Your easybits Classification Pipeline 1. Go to **extractor.easybits.tech** and create a new pipeline 2. Add **one field** called `document_class` 3. In the field prompt, describe your classification categories and how to identify each one (see the "easybits: Classify Document" node for a reference prompt) 4. The prompt should instruct the model to return exactly one category label – no explanations, no extra text 5. Adjust the categories and identification criteria to match your specific document types 6. Copy your **Pipeline ID** and connect the credential in the classification node > 💡 **Tip:** The classification prompt is the heart of this workflow. The more specific your category descriptions and decision rules are, the more accurate your results will be. ### 2. Create Three Extraction Pipelines Create one pipeline per document type on **extractor.easybits.tech**: - **Invoice pipeline** – fields: `invoice_number`, `total_amount`, `currency`, `due_date`, `vendor_name` - **Contract pipeline** – fields: `client_name`, `contract_type`, `contract_value`, `currency`, `start_date`, `notice_period` - **Purchase Order pipeline** – fields: `supplier_name`, `po_number`, `order_date`, `expected_delivery_date`, `total_amount`, `currency` Connect each pipeline's credentials to the matching Extractor node. ### 3. Set Up Gmail Connect your Gmail account via OAuth2. Optionally filter by label to only process specific emails. Make sure **Download Attachments** is enabled in the node options. ### 4. Set Up Google Drive Create three folders in Google Drive: **Invoices**, **Contracts**, **Purchase Orders**. Select the correct folder in each Upload node. Set the **Input Binary Field** to `attachment_0` (or whichever field carries the PDF). ### 5. Set Up Google Sheets Create a spreadsheet (or use an existing Master Finance File). Make sure the column headers match the field mappings in the "Update Master Finance Sheet" node. ### 6. Set Up Slack Connect your Slack workspace. Select the channel for contract notifications (e.g. `#contracts`) and the channel for PO updates (e.g. `#operations`). Adjust the message templates if your extracted field names differ. ### 7. Activate & Test Set the workflow to active and send a test email with an invoice, contract, and purchase order attached to verify each route works end to end.

View

Need Custom Automation?

Get help designing a custom n8n workflow that connects your stack and fits your process.

Host a static HTML KPI dashboard from Google Sheets with CustomJS

Workflow preview

Overview

Hosting a static HTML KPI dashboard with CustomJS

Why This Workflow?

What This Workflow Does

Key Features

How It Works