Building and maintaining KPI dashboards can be time-consuming and expensive. Traditional BI tools require complex setup, ongoing maintenance, and often come with hefty subscription fees. What if you could automatically generate a beautiful, interactive KPI dashboard directly from Google Sheets data and host it as a static HTML page—all without managing servers?
This comprehensive guide shows you how to build an automated weekly KPI dashboard using n8n, Google Sheets, and CustomJS. The workflow fetches your metrics, transforms them into structured JSON, generates interactive charts and tables, and hosts everything as a live HTML page with optional custom domain support.
Live KPI dashboard with charts, metrics, and funnel visualization
Creating dashboards manually or passing raw sheet data to visualization tools is time-consuming, error-prone, and hard to automate. Most solutions require:
This n8n workflow automates the entire process by converting Google Sheets data into structured JSON and feeding it directly into a CustomJS HTML template. The result is a fully interactive, production-ready KPI dashboard that updates automatically with minimal effort.
The workflow orchestrates five key steps to transform raw spreadsheet data into a live, hosted dashboard:
All without manual intervention. Schedule it weekly, trigger it on-demand, or connect it to your CRM for real-time updates.
The n8n workflow consists of six nodes that work together to collect, transform, and publish your KPI dashboard:
Complete n8n workflow: from Google Sheets to hosted HTML dashboard
Choose between scheduled execution (e.g., every Monday at 9 AM) or manual trigger for on-demand dashboard updates. The schedule trigger is perfect for weekly reports, while manual execution works great for testing or ad-hoc refreshes.
Connects to your Google Sheets document and pulls all rows from your KPI tracking sheet. The sheet should contain columns for date, channel, visitors, leads, demos, proposals, and deals won. See the example spreadsheet for the expected format.
Processes the raw sheet data and extracts relevant fields. This node handles data cleaning, type conversion, and initial structuring. It ensures dates are properly formatted and numeric values are ready for aggregation.
Groups metrics by week and channel, calculating totals and averages. This node performs the heavy lifting of data aggregation, creating the summary statistics that power your KPI cards and charts. It handles weekly rollups, channel breakdowns, and conversion rate calculations.
Builds the complete HTML dashboard with embedded Chart.js visualizations. The template includes responsive KPI cards, bar charts for channel performance, line charts for trends, and funnel visualizations for conversion tracking. All styling is inline for maximum portability.
Publishes the HTML dashboard to CustomJS hosting. Each execution overwrites the previous version, ensuring your dashboard always shows the latest data. The hosted page gets a unique URL that you can share with stakeholders or connect to your custom domain with one click.
CustomJS node configuration for hosting the HTML dashboard
The workflow expects a specific data structure in your Google Sheets. Here's how to set up your KPI tracking sheet:
| Column | Type | Description | Example |
|---|---|---|---|
| Date | Date | Date of the metric entry | 2026-02-01 |
| Channel | Text | Marketing channel or source | Google Ads |
| Visitors | Number | Total website visitors | 1250 |
| Leads | Number | Qualified leads generated | 105 |
| Demo Booked | Number | Demos scheduled | 12 |
| Proposal Sent | Number | Proposals delivered | 8 |
| Won | Number | Deals closed | 3 |
📊 Example Spreadsheet: Check out our sample Google Sheets template to see the exact format and sample data. You can make a copy and populate it with your own metrics.
The dashboard automatically generates summary cards for your key metrics. Each card displays the total for the reporting period with clear, large numbers that stakeholders can understand at a glance.
All charts are generated using Chart.js, a powerful and lightweight JavaScript charting library. The charts are fully responsive and interactive—hover over data points to see exact values.
The dashboard is hosted as a static HTML page on CustomJS, which means:
Want to host your dashboard at dashboard.yourcompany.com? CustomJS makes it simple:
The workflow can optionally generate QR codes for the dashboard link, making it easy to share in presentations, printed reports, or physical locations. Scan the code to instantly view the latest dashboard on any device.
Visit the n8n workflow template page and click "Use workflow" to import it into your n8n instance. The template includes all nodes pre-configured with sample data.
Configure the Google Sheets node with your credentials:
Set up the CustomJS node to host your dashboard:
Modify the HTML template node to match your branding:
Here's a simplified version of the HTML template that powers the dashboard. The actual workflow includes more sophisticated data binding and chart configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Sales Funnel Report</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 10px;
}
.subtitle {
color: #666;
margin-bottom: 30px;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.kpi-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.kpi-label {
font-size: 14px;
opacity: 0.9;
margin-bottom: 8px;
}
.kpi-value {
font-size: 32px;
font-weight: bold;
}
.chart-container {
margin-bottom: 40px;
}
.chart-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>Weekly Sales Funnel Report</h1>
<p class="subtitle">Week ending </p>
<!-- KPI Cards -->
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-label">Visitors</div>
<div class="kpi-value"></div>
</div>
<div class="kpi-card">
<div class="kpi-label">Leads</div>
<div class="kpi-value"></div>
</div>
<div class="kpi-card">
<div class="kpi-label">Deals Won</div>
<div class="kpi-value"></div>
</div>
<div class="kpi-card">
<div class="kpi-label">Lead Rate</div>
<div class="kpi-value">%</div>
</div>
<div class="kpi-card">
<div class="kpi-label">Close Rate</div>
<div class="kpi-value">%</div>
</div>
</div>
<!-- Visitors by Channel Chart -->
<div class="chart-container">
<div class="chart-title">Visitors by Channel</div>
<canvas id="channelChart"></canvas>
</div>
<!-- Funnel Conversion Chart -->
<div class="chart-container">
<div class="chart-title">Funnel Conversion</div>
<canvas id="funnelChart"></canvas>
</div>
</div>
<script>
// Channel Chart
const channelCtx = document.getElementById('channelChart').getContext('2d');
new Chart(channelCtx, {
type: 'bar',
data: {
labels: ,
datasets:
},
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true, beginAtZero: true }
}
}
});
// Funnel Chart
const funnelCtx = document.getElementById('funnelChart').getContext('2d');
new Chart(funnelCtx, {
type: 'line',
data: {
labels: ['Visitors', 'Leads', 'Demo', 'Proposal', 'Won'],
datasets: [{
label: 'Funnel',
data: ,
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
scales: {
y: { beginAtZero: true }
}
}
});
</script>
</body>
</html>💡 Note: The actual workflow uses Nunjucks templating to inject data dynamically. The placeholders are replaced with real values from your Google Sheets during execution.
Add a QR code generation node to create scannable codes for your dashboard. Perfect for including in printed reports or presentations.
// Add this to your HTML template
import QRCode from 'https://esm.sh/[email protected]';
const qrCanvas = document.getElementById('qr-code');
await QRCode.toCanvas(qrCanvas, '', {
width: 200,
margin: 2
});Extend the dashboard with additional visualizations:
Store previous dashboard versions to track changes over time. Add a node that saves each week's data to a separate sheet or database for historical analysis.
Combine data from multiple sheets or different sources:
Add an email node to automatically send the dashboard link to stakeholders when it updates. Include a screenshot or summary of key metrics in the email body.
Track campaign performance across multiple channels. Update Google Sheets daily with metrics from Google Analytics, Facebook Ads, and LinkedIn. Generate a weekly dashboard showing ROI, cost per lead, and conversion rates by channel.
Give executives real-time visibility into the sales pipeline. Connect to your CRM (Salesforce, HubSpot, Pipedrive) via n8n, aggregate deal stages, and display funnel metrics, win rates, and revenue forecasts on a live dashboard.
Monitor key SaaS metrics like MRR, churn rate, customer acquisition cost, and lifetime value. Pull data from Stripe, your database, and support tools. Generate a weekly executive summary dashboard with trend charts and cohort analysis.
Track daily sales, conversion rates, average order value, and inventory levels. Connect to Shopify, WooCommerce, or your custom platform. Display product performance, traffic sources, and revenue trends on an always-updated dashboard.
Create branded dashboards for each client showing their marketing performance. Automate data collection from ad platforms, analytics, and social media. Generate unique dashboard URLs for each client with custom domain support.
Symptom: Dashboard loads but charts are blank or missing
Solutions:
Symptom: Workflow fails at the Google Sheets node
Solutions:
Symptom: Metrics show incorrect totals or missing data
Solutions:
Symptom: Dashboard shows old data after workflow execution
Solutions:
This solution is extremely cost-effective compared to traditional BI tools:
| Component | Cost | Notes |
|---|---|---|
| Google Sheets | Free | Included with Google account |
| n8n | Free (self-hosted) or $20/mo (cloud) | Self-hosted is free, cloud starts at $20/mo |
| CustomJS Hosting | Free (included in plan) | HTML hosting included with CustomJS account |
| Custom Domain (optional) | $10-15/year | Domain registration cost only |
| Total | $0-20/month | Compare to $70-300/mo for traditional BI tools |
Traditional BI tools like Tableau ($70/user/month), Power BI ($10-20/user/month), or Looker ($3,000+/month) are significantly more expensive. This n8n + CustomJS solution provides professional dashboards at a fraction of the cost.
Yes! The workflow can be adapted to work with any data source that n8n supports. Replace the Google Sheets node with nodes for Airtable, PostgreSQL, MySQL, MongoDB, REST APIs, or any of the 400+ integrations available in n8n. The key is to transform your data into the same JSON structure expected by the HTML template.
As often as you need! The workflow can run on any schedule—hourly, daily, weekly, or on-demand. For real-time dashboards, consider using n8n's webhook trigger to update whenever source data changes. CustomJS hosting handles unlimited updates without additional costs.
Yes! The HTML template uses responsive CSS and Chart.js is fully responsive. The dashboard automatically adapts to different screen sizes, making it perfect for viewing on phones, tablets, and desktops. Charts resize and reflow based on viewport width.
Yes! CustomJS offers optional password protection for hosted HTML pages. Enable it in your CustomJS dashboard settings to require authentication before viewing. This is perfect for sensitive business metrics that should only be accessible to authorized users.
Chart.js supports many chart types including line, bar, pie, doughnut, radar, polar area, bubble, and scatter plots. Simply modify the HTML template node to add new canvas elements and Chart.js initialization code. Check the Chart.js documentation for examples and configuration options.
The workflow handles large datasets efficiently by aggregating data in n8n before generating the HTML. However, for optimal performance, consider filtering to only the last 12-26 weeks of data. You can add a filter node to limit the date range or use Google Sheets' built-in filtering to create a "Dashboard Data" sheet with pre-aggregated metrics.
Yes! The hosted HTML page can be embedded in an iframe on any website. Simply use <iframe src="your-dashboard-url"></iframe>. This is perfect for embedding dashboards in internal wikis, client portals, or company intranets.
Basic familiarity with n8n and JSON is helpful, but not required. The template is pre-configured and ready to use. If you want to customize the dashboard appearance or add features, basic HTML/CSS knowledge is useful. The n8n community and CustomJS documentation provide extensive examples and support.
Building professional KPI dashboards doesn't require expensive BI tools or complex infrastructure. With n8n, Google Sheets, and CustomJS, you can create automated, interactive dashboards that update on schedule and host them with a single click.
This workflow demonstrates the power of no-code automation combined with modern web technologies. By transforming spreadsheet data into structured JSON and leveraging Chart.js for visualization, you get enterprise-grade dashboards at a fraction of the traditional cost.
Key benefits:
Ready to build your own KPI dashboard? Import the n8n workflow template, connect your Google Sheets, and deploy your first dashboard in minutes. For more automation workflows and examples, explore our n8n integration guide and API documentation.
About the Author: This guide is maintained by the CustomJS team. We build tools that make automation more powerful and accessible. Questions? Contact us at [email protected]
Continue reading on similar topics
Generate HTML forms with AI (no form builder) and send submissions to webhooks that trigger Make.com and n8n workflows. Includes copy-paste code and best practices.
Generate automated social media screenshots and dynamic OG images from HTML templates. Includes API examples and Make.com/n8n automation workflows.
Learn how to automate PDF generation in n8n workflows. Complete guide covering HTML to PDF conversion, invoice generation, and workflow templates.