skills.rest
jasonzhu0922-sketch
jasonzhu0922-sketchCOMMUNITY
Explore all skills by this author →
GitHub

build-dashboard

Generate self-contained interactive HTML dashboards with Chart.js charts, filters, and sortable tables.

6|1|Updated Sep 3, 2026
Search Tags:#html#data visualization#dashboard#filters#chart.js#kpi#interactive report
One-click install
npx skills add https://github.com/jasonzhu0922-sketch/agentloop --skill build-dashboard-jasonzhu0922-sketch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-dashboard
Source: https://github.com/jasonzhu0922-sketch/agentloop/tree/main/packages/agentloop-skills/skills/build-dashboard
Command: npx skills add https://github.com/jasonzhu0922-sketch/agentloop --skill build-dashboard-jasonzhu0922-sketch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning raw query results or pasted data into a shareable, interactive dashboard usually requires BI tools, servers, or front-end development effort. This Skill produces a single self-contained HTML file with charts, KPI cards, filters, and tables that opens directly in any browser. ## Core Features & Use Cases - Self-Contained HTML Output: Embeds all data as JSON inside one HTML file using Chart.js via CDN, requiring no server or dependencies. - Interactive Components: Includes KPI cards with period-over-period change, line/bar/doughnut charts, dropdown and date-range filters, and sortable paginated tables. - Flexible Data Sources: Works with connected data warehouses, pasted or uploaded CSV data, or generates realistic sample data from a description. - Use Case: A sales manager pastes quarterly order data and receives a dashboard with revenue trend, top products, regional breakdown, and a filterable detail table they can email to the team. ## Quick Start Ask the agent to build an interactive sales dashboard with revenue trend, top products, and regional breakdown from your orders data.

Frequently Asked Questions about build-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an interactive HTML dashboard without a server?▼

Generate a single self-contained HTML file that embeds data as JavaScript variables and renders charts with Chart.js loaded from a CDN. The file opens directly in any browser with no backend, build step, or dependencies required.

How to add dropdown filters that update Chart.js charts?▼

Populate select elements with unique values from the dataset, then on change re-filter the raw data array and call chart.update('none') with the new labels and data. The same filter pass should also re-render KPI cards and the detail table.

Can an HTML dashboard handle large datasets?▼

Client-side dashboards work well under 1,000 rows with full interactivity. Between 1,000 and 100,000 rows, pre-aggregate the data before embedding it. Beyond 100,000 rows, use a BI tool or server-side pagination instead.

Does the dashboard work offline or when shared by email?▼

All data is embedded directly in the HTML, so the file can be shared and opened anywhere. However, Chart.js loads from a CDN, so an internet connection is needed on first open unless the library is inlined.

Why is my Chart.js dashboard slow with many data points?▼

Performance degrades when line charts exceed 500 points per series or tables render hundreds of rows. Downsample series, disable animations, use chart.update('none') for filter updates, and paginate tables to 50-100 visible rows.

Related Skills

Explore More Data & Analytics Skills→
frumu-aifrumu-ai
114

data-explore-data

Profile datasets from warehouses and uploaded files to generate table and column metrics.

Official
Intermediate
aemgdcaemgdc
1

aa-executive-briefing

Generates executive performance briefings from Adobe Analytics report suite data as HTML documents.

Official
Advanced
xpert-aixpert-ai
8

gather-business-context

Gather business context from sources to frame downstream data analysis.

Official
Advanced
reason-machinesreason-machines
5

power-bi-sales-analytics-dashboard

Build Power BI sales dashboards with DAX measures, forecasting, and row-level security.

Official
Intermediate