Quick Start

This guide gets you from zero to a running dashboard in under five minutes. Templates are plain HTML files — no build tool, no framework, no CLI required.

## Option 1 — Download from the template page

Every template detail page has a Download button (free templates) or a Buy — $49.99 button (Pro templates). After purchase you receive a .zip archive.

  1. Unzip the archive into your project folder.
  2. Open index.html in a browser — you will see the dashboard immediately.
  3. Replace the sample data objects at the top of each <script> block with your own values.
  4. Deploy to any static host.

💡 All chart data is defined in plain JavaScript objects at the top of each script block — search for /* DATA */ to find them quickly.

## Option 2 — Serve with a local dev server

If you prefer live-reload while editing, spin up any static server:

# Node.js (npx, no install)
npx serve .

# Python 3
python -m http.server 8080

# VS Code
# Install the "Live Server" extension, right-click index.html → Open with Live Server

Then open http://localhost:3000 (or the port your server reports).

## File overview 
marketing-performance-hub/
├── index.html          ← entry point, all markup
├── css/
│   └── style.css       ← template-specific styles
└── js/
    └── charts.js       ← ECharts config objects (edit data here)

Shared assets (fonts, base CSS variables) are loaded from ../shared/dt-core.css relative to the template folder. When deploying, keep the shared/ directory alongside the template.

## Connecting your data

Data lives in a single const DATA = { ... } block near the top of js/charts.js. Swap it for a fetch() call to your API:

// Before — static sample data
const DATA = {
  revenue: [4200, 3800, 5100, 6200, 5800, 7100],
  labels:  ['Jan','Feb','Mar','Apr','May','Jun'],
};

// After — live API
const res  = await fetch('/api/kpis/revenue');
const DATA = await res.json();

See Connecting Real Data for REST, WebSocket, and polling patterns.

## Next steps