Build an interactive sales dashboard from real data using AI-powered vibe coding. Download the sample dataset, choose a prompt template, and let AI generate your dashboard.
You are the operations manager at TechMart, a fictional Malaysian e-commerce store selling electronics, accessories, and software. You have three months of sales data (January to March 2026) and need a dashboard to present at the quarterly review meeting.
Your dashboard should answer these key business questions:
Quarterly sales data for TechMart. Contains transactions across 6 products, 4 regions, and 4 sales representatives. Ready to paste into any AI coding tool.
Copy any of these prompts and paste them into your AI tool along with the CSV data. Start with Basic and work your way up.
Build a sales dashboard from this CSV data (columns: Date, Product, Category, Quantity, Unit_Price, Total_Revenue, Region, Sales_Rep, Payment_Method, Customer_Type, Rating). Show: 4 summary cards (total revenue, total orders, average order value, average rating as stars), a bar chart of revenue by month, a donut chart of sales by category, and a sortable data table. Use Chart.js. Clean professional design with warm cream background. Single HTML file.
Build a multi-section interactive sales dashboard from this CSV data. Include: 1) KPI cards that animate counting up (total revenue in RM, orders, avg order value, avg rating shown as stars). 2) Line chart: daily revenue trend with gradient fill. 3) Polar area chart: revenue by product. 4) Stacked bar: category mix per region. 5) Sortable transaction table filterable by category, region, and payment method. Use Chart.js. Dark sidebar navigation. Parchment/cream background (#f5f4ed), Georgia serif for headings. Single HTML file.
Build a 5-page analytics dashboard with sidebar navigation from this CSV data. Each page shows different visualizations: Page 1 "Overview": Radar chart (performance dimensions), line chart (daily revenue with gradient fill), KPI cards with animated counting numbers. Page 2 "Products": Polar area chart (revenue by product), scatter plot (price vs quantity, bubble size=revenue), product cards sized by revenue. Page 3 "Regions": Stacked bar (category mix per region), bubble chart (avg order value vs total orders), region cards with New/Returning customer split. Page 4 "Sales Reps": Grouped bar (revenue by category per rep), doughnut (market share), circular progress rings showing % of RM 12,000 target. Page 5 "Transactions": Histogram (transaction value distribution), full sortable/searchable table with star ratings, filter pills for category, region, payment method, and rating. Use Chart.js. Smooth slide transitions between pages (300ms). Dark sidebar (#30302e), parchment background (#f5f4ed), terracotta accent (#c96442), Georgia serif headings, ring shadows instead of box-shadows. Single HTML file.
Paste the CSV content directly into the prompt. Most AI tools work best when the data is right there in the conversation, not as a file upload.
Start with the basic prompt, then iterate. Get a working dashboard first, then ask AI to add specific charts, filters, or styling improvements one at a time.
Ask AI to add specific charts you want. Once your base dashboard works, say things like "Add a line chart showing daily revenue trend" or "Add a filter dropdown for regions."
If something breaks, describe the problem clearly. Say "The bar chart is showing wrong values" instead of "It's broken." The more specific you are, the better the fix.
Save working versions before making big changes. Copy your working code to a backup file before asking for major modifications. This way you can always go back.