Host a Static HTML KPI Dashboard from Google Sheets with n8n and CustomJS

Why This Workflow?

Creating dashboards manually or passing raw sheet data to visualization tools is time-consuming, error-prone, and hard to automate. Most solutions require:

• Complex BI tools: Tableau, Power BI, or Looker with steep learning curves and high costs
• Manual updates: Copy-pasting data, rebuilding charts, and republishing dashboards
• Server management: Hosting infrastructure, SSL certificates, and deployment pipelines
• Developer resources: Custom code for data transformation and visualization

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.

What This Workflow Does

The workflow orchestrates five key steps to transform raw spreadsheet data into a live, hosted dashboard:

1. Fetches KPI metrics from Google Sheets — Pulls data for visitors, leads, demos booked, proposals sent, and deals won
2. Aggregates metrics by week and channel — Groups data by time period and marketing channel for trend analysis
3. Converts to structured JSON — Transforms sheet rows into clean, chart-ready JSON format
4. Generates static HTML page — Builds KPI cards, interactive Chart.js visualizations, and data tables automatically
5. Hosts on CustomJS — Deploys instantly with optional custom domain connection (one-click setup)

All without manual intervention. Schedule it weekly, trigger it on-demand, or connect it to your CRM for real-time updates.

Workflow Architecture

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

Node Breakdown

CustomJS node configuration for hosting the HTML dashboard

Setting Up Your Google Sheets Data Source

The workflow expects a specific data structure in your Google Sheets. Here's how to set up your KPI tracking sheet:

Required Columns

Data Entry Tips

• Consistent date format: Use YYYY-MM-DD format for reliable date parsing
• Channel naming: Keep channel names consistent (e.g., always "Google Ads" not "google ads" or "GoogleAds")
• Daily or weekly entries: The workflow aggregates by week, so you can enter data daily or weekly
• Missing data: Use 0 for missing metrics rather than leaving cells empty
• Historical data: Include at least 4-8 weeks of data for meaningful trend visualization

Key Features of the Dashboard

1. Automated KPI Cards

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.

• Visitors: Total website traffic across all channels
• Leads: Qualified leads generated
• Deals Won: Closed deals and revenue
• Lead Rate: Conversion percentage from visitors to leads
• Close Rate: Conversion percentage from leads to closed deals

2. Interactive Charts with Chart.js

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.

• Visitors by Channel: Stacked bar chart showing traffic sources over time
• Funnel Conversion: Line chart visualizing the sales funnel from visitors to won deals
• Weekly Trends: Time-series charts for tracking performance over weeks

3. Static HTML Hosting

The dashboard is hosted as a static HTML page on CustomJS, which means:

• Instant deployment: No build process, no server configuration
• Fast loading: Static HTML loads in milliseconds
• Reliable hosting: No server downtime or maintenance
• Shareable URL: Send the link to anyone who needs access
• Custom domains: Connect your own domain with one click

4. Custom Domain Support

Want to host your dashboard at dashboard.yourcompany.com? CustomJS makes it simple:

1. Deploy your dashboard and get the CustomJS URL
2. Add a CNAME record pointing to CustomJS
3. Click "Connect Domain" in the CustomJS dashboard
4. Your dashboard is live on your custom domain with automatic SSL

5. QR Code Ready (Optional)

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.

How to Use the n8n Template

Step 1: Import the Workflow

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.

Step 2: Connect Google Sheets

Configure the Google Sheets node with your credentials:

1. Click on the "Get Data From Sheet" node
2. Add your Google Sheets credential (OAuth2 or Service Account)
3. Select your spreadsheet and sheet name
4. Ensure your sheet has the required columns (Date, Channel, Visitors, Leads, etc.)

Step 3: Configure CustomJS Hosting

Set up the CustomJS node to host your dashboard:

1. Sign up for a CustomJS account (free tier includes hosting)
2. Get your API key from the CustomJS dashboard
3. Click on the "Upsert HTML Page" node
4. Add your CustomJS credential with the API key
5. Set the page name (e.g., "KPI Dashboard")

Step 4: Customize the Dashboard

Modify the HTML template node to match your branding:

• Colors: Update CSS variables for brand colors
• Logo: Add your company logo URL
• Title: Change "Weekly Sales Funnel Report" to your preferred title
• Metrics: Add or remove KPI cards based on your needs
• Charts: Customize chart types, colors, and labels

Step 5: Test and Deploy

1. Click "Execute Workflow" to test with your data
2. Check the CustomJS output for the hosted URL
3. Open the URL to view your live dashboard
4. If everything looks good, activate the workflow for scheduled execution

Code Example: HTML Dashboard Template

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.

Optional Enhancements

1. Generate QR Codes for Dashboard Links

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
});

2. Include Multiple Charts

Extend the dashboard with additional visualizations:

• Pie charts: Channel distribution breakdown
• Doughnut charts: Conversion rate visualization
• Radar charts: Multi-dimensional performance comparison
• Scatter plots: Correlation analysis between metrics

3. Historical Trends

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.

4. Multiple Data Sources

Combine data from multiple sheets or different sources:

• Google Analytics for website traffic
• CRM data from Salesforce or HubSpot
• Ad spend from Google Ads or Facebook Ads
• Email metrics from Mailchimp or SendGrid

5. Email Notifications

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.

Best Practices and Tips

Data Quality

• Validate inputs: Add error handling for missing or invalid data
• Consistent formatting: Ensure dates and numbers are properly formatted in Google Sheets
• Data freshness: Set up alerts if source data hasn't been updated recently
• Backup data: Keep historical copies of your Google Sheets

Performance Optimization

• Limit data range: Only fetch the last 12 weeks of data to keep dashboards fast
• Aggregate early: Perform calculations in the workflow, not in the browser
• Minimize chart complexity: Too many data points can slow down rendering
• Cache static assets: Use CDN links for Chart.js and other libraries

Security Considerations

• Access control: Use CustomJS's optional password protection for sensitive dashboards
• API keys: Store credentials securely in n8n's credential manager
• Data privacy: Avoid including personally identifiable information in public dashboards
• URL obscurity: CustomJS generates unique URLs that are hard to guess

Maintenance

• Monitor executions: Set up n8n alerts for workflow failures
• Version control: Export and save workflow versions before making changes
• Test with sample data: Use a test sheet to validate changes before production
• Document customizations: Keep notes on any modifications to the template

Real-World Use Cases

Troubleshooting Common Issues

Charts Not Rendering

Symptom: Dashboard loads but charts are blank or missing

Solutions:

• Verify Chart.js CDN link is accessible
• Check browser console for JavaScript errors
• Ensure data is properly formatted as JSON arrays
• Validate that canvas elements have unique IDs

Google Sheets Connection Fails

Symptom: Workflow fails at the Google Sheets node

Solutions:

• Re-authenticate your Google account in n8n credentials
• Check that the spreadsheet ID is correct
• Verify the sheet name matches exactly (case-sensitive)
• Ensure the Google Sheets API is enabled in your Google Cloud project

Data Aggregation Errors

Symptom: Metrics show incorrect totals or missing data

Solutions:

• Check for empty cells or invalid data types in Google Sheets
• Verify date format is consistent (YYYY-MM-DD)
• Ensure numeric columns contain only numbers (no text)
• Test the Aggregate node with sample data to isolate the issue

Dashboard Not Updating

Symptom: Dashboard shows old data after workflow execution

Solutions:

• Clear browser cache and hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
• Verify the workflow completed successfully in n8n
• Check that the page name in the Upsert node matches your dashboard
• Ensure the CustomJS API key has write permissions

Pricing and Costs

This solution is extremely cost-effective compared to 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.

Frequently Asked Questions

Conclusion

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:

• ✅ Automated updates: Set it and forget it—dashboards update on schedule
• ✅ Cost-effective: Free or low-cost compared to traditional BI tools ($0-20/month vs $70-300/month)
• ✅ No infrastructure: No servers, no deployment pipelines, no SSL certificates to manage
• ✅ Fully customizable: Modify charts, colors, metrics, and layouts to match your needs
• ✅ Shareable: Send the URL to anyone or connect a custom domain

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.