Build a Business Analytics Dashboard

What you’re building

Every MIS course asks you to analyze data. Every time, you fire up Tableau, wait for the license server, fight with data connections, and spend 40 minutes building something that should take 5. What if you could drag a CSV file into a browser window and have KPI cards, bar charts, line charts, scatter plots, and a sortable data table appear instantly?

That is what you will build in this lesson — in about 10-20 minutes for first-time users, or 3-5 minutes once your setup is ready.

By the end you will have a single HTML file that works as a complete business analytics dashboard. Drop most well-formed CSVs onto it (UTF-8 recommended, under 50 MB for smooth browser performance), and it auto-detects columns, computes summary KPIs, and renders interactive Chart.js visualizations. No server. No license. No installation. Open it on any computer with a browser and it works.

Who this is for

• MIS undergrads who need quick data exploration before a deeper analysis.
• Business analytics students building portfolio pieces or class presentations.
• Anyone tired of waiting for Tableau to load when they just want to see what a dataset looks like.

The showcase

Here is what the finished dashboard looks like once you open the HTML file and upload a CSV:

• File upload area with drag-and-drop support and a file picker button.
• KPI cards across the top showing row count, column count, and auto-calculated summary stats (sum, average, min, max) for the first three numeric columns.
• Column selector panel letting you choose which columns to visualize.
• Chart section with tabs for Bar, Line, Scatter, and Pie charts — pick your X and Y axes from dropdowns and the chart updates live.
• Sortable data table showing all rows with click-to-sort column headers, search/filter box, and pagination (50 rows per page).
• Export buttons for downloading filtered data as CSV and charts as PNG images.

Your CSV data is processed locally in the browser — it is never uploaded to any server. External libraries and fonts are fetched from CDNs on page load. You can email this file to a teammate and they will have the same dashboard on their laptop in seconds.

The prompt

Open your terminal, navigate to a project folder, start your AI CLI tool (such as Claude Code, Gemini CLI, or your preferred tool), and paste this prompt:

Build a single self-contained HTML file called analytics-dashboard.html that serves as
a business analytics dashboard for CSV data. Requirements:

1. CSV UPLOAD
   - Drag-and-drop zone (dashed border area) and a "Choose File" button
   - Parse CSV with PapaParse (load from CDN: https://cdn.jsdelivr.net/npm/papaparse@5)
   - Auto-detect headers from the first row
   - Auto-detect column types: numeric (parseable as float), date (ISO or MM/DD/YYYY),
     or categorical (everything else)
   - Handle quoted fields, commas inside quotes, and UTF-8 encoding
   - If characters look broken after upload, note that the CSV should be re-saved as UTF-8
   - Show a loading spinner for files over 1 MB

2. KPI CARDS (top of page, appear after upload)
   - Card 1: Total Rows / Total Columns
   - Cards 2-4: For the first three numeric columns, show:
     - Column name as the card title
     - Sum, Average (2 decimal places), Min, Max
   - Cards are styled as rounded rectangles with a subtle gradient background
   - Numbers animate counting up when they first appear

3. COLUMN SELECTOR
   - Sidebar or top panel listing all columns with checkboxes
   - Toggle columns on/off for the data table
   - Dropdowns for selecting X-axis and Y-axis columns for charts

4. INTERACTIVE CHARTS (using Chart.js from CDN)
   - Tab interface to switch between: Bar, Line, Scatter, Pie
   - X-axis and Y-axis dropdowns (populated from column names)
   - For Bar and Pie: if X is categorical, auto-aggregate Y values by category
     (sum, average, or count -- let user pick)
   - For Line: if X is a date column, sort by date automatically
   - For Scatter: show individual data points with hover tooltips showing the full row
   - Charts resize responsively
   - Color palette: use a professional 8-color palette suitable for business presentations

5. DATA TABLE
   - Show all rows with column headers
   - Click any column header to sort ascending/descending (toggle with arrow indicator)
   - Search box that filters across all columns (case-insensitive)
   - Pagination: 50 rows per page with page navigation controls
   - Alternating row colors for readability
   - Numeric columns right-aligned, text columns left-aligned

6. EXPORT
   - "Download Filtered CSV" button exports only the currently filtered/visible rows
   - "Download Chart as PNG" button for the active chart (use Chart.js toBase64Image)

7. DESIGN
   - Dark theme: background #0f172a, cards #1e293b, text #e2e8f0, accent #3b82f6
   - Clean sans-serif font (Inter from Google Fonts CDN)
   - Responsive layout that works on laptop screens (1366px+)
   - Include a "Load Sample Data" button that populates with a built-in dataset:
     a 50-row sales dataset with columns: Date, Region, Product, Units_Sold, Revenue,
     Cost, Profit (realistic quarterly business data)
   - Include a "Clear" button to reset everything

8. TECHNICAL
   - Pure HTML/CSS/JS in one file, no build step
   - Chart.js loaded from CDN (https://cdn.jsdelivr.net/npm/chart.js)
   - PapaParse loaded from CDN for robust CSV parsing
   - All processing happens client-side, no network requests after page load

What you get

After the LLM finishes (typically 60-90 seconds), you will have a single file: analytics-dashboard.html. Open it in any browser.

Expected output structure

analytics-dashboard.html    (~700-900 lines)

Click Load Sample Data and you should see:

1. KPI cards populate with row/column counts and summary stats for Units_Sold, Revenue, and Profit.
2. Bar chart (default view) showing Revenue by Region — a classic BI visualization.
3. Data table with all 50 rows, sortable by any column. Click “Revenue” to sort high-to-low.
4. Switch to Line chart, set X to Date and Y to Revenue. The data auto-sorts by date and you see a revenue trend line.
5. Switch to Scatter, set X to Units_Sold and Y to Profit. You can see the correlation between volume and profitability.

If something is off

LLMs occasionally produce code with small bugs. Open DevTools (F12 > Console) and copy the first red error message into your follow-up prompt — that gives the AI the context it needs to fix the issue. Here are the most common issues and one-line fix prompts:

When things go wrong

The table above covers quick fixes, but here is a structured approach for the most common dashboard issues. Use the Symptom, Evidence, Request pattern — describe what you see, paste the error or screenshot context, and ask the AI for a targeted fix.

How it works (the 2-minute explanation)

You do not need to understand every line of the generated code, but here is the mental model:

1. CSV parsing with PapaParse handles edge cases you would otherwise spend hours debugging — quoted fields, embedded commas, different line endings. It outputs an array of objects where each key is a column name.
2. Type detection iterates through the first 10 rows and tries to parse each column as a number, then a date. If neither works, it is categorical. This is similar to common spreadsheet type-inference heuristics.
3. KPI computation is basic descriptive statistics: reduce() for sum, sum/length for average, Math.min/max with spread operator. Nothing fancy, but presented in a clean card layout it looks professional.
4. Chart.js renders bar, line, scatter, and pie charts from the same data — you just change the chart type property. Aggregation (grouping categoricals and summing numerics) is done with a simple reduce() into a Map.
5. Sorting uses Array.prototype.sort() with a comparator function that checks the column type.

Customize it

The base dashboard is useful as-is, but the real power is in customization. Each of these is a single follow-up prompt:

Add pivot table functionality

Add a "Pivot Table" tab next to the charts. Let the user drag column names into
Row, Column, and Value areas. The value area should support Sum, Count, Average,
Min, and Max aggregations. Render the pivot table as an HTML table with row and
column totals. This should work like a simplified Excel pivot table.

Add conditional formatting to the data table

Add conditional formatting to numeric columns in the data table. For each numeric
column, color-code cells using a green-yellow-red gradient based on the value
relative to the column's min and max. Add a toggle button to turn conditional
formatting on/off.

Add multiple file comparison

Allow uploading multiple CSV files. Show a file selector tab bar. Add a "Compare"
view that overlays line charts from different files on the same axes (useful for
comparing monthly reports). Use different colors for each file with a legend.

Add calculated columns

Add a "Calculated Column" button that lets the user define a new column using a
formula like "Revenue - Cost" or "Units_Sold * 1.08". Parse simple arithmetic
expressions referencing existing column names. The new column should appear in
the data table and be available for charts.

Try it yourself

1. Open your CLI tool in an empty folder.
2. Paste the main prompt from above.
3. Open the generated analytics-dashboard.html in your browser.
4. Click Load Sample Data and explore the built-in sales dataset.
5. Now download a real CSV — try the Kaggle Superstore dataset (requires a free Kaggle account), a sample from data.gov, or any CSV from your coursework.
6. Drag the file onto the upload area and see your data come alive.
7. Pick one customization from the list above and add it with a follow-up prompt.

Key Takeaways

• One detailed prompt produces a complete BI tool. Specificity in your prompt (KPI card layout, chart types, sort behavior, sample data structure) is what gets you a working result on the first try.
• CSV parsing, type detection, and chart rendering are the building blocks of every BI tool. Whether you use Tableau, Power BI, or a hand-built dashboard, the underlying logic is the same: extract, transform, load.
• Iterative customization beats upfront planning. Start with a working foundation, then add pivot tables, conditional formatting, or calculated columns one prompt at a time.
• Client-side tools have real advantages. No license fees, no server dependencies, no data leaving your machine. For quick exploration before a formal analysis, this is faster than any enterprise tool.
• The prompt is your specification document. Treat it like a business requirements doc — the more precise your requirements, the better the deliverable.

Portfolio Suggestion

Save your analytics-dashboard.html file and any customized versions in a GitHub repository called mis-toolkit or business-analytics-portfolio. For maximum impact:

• Include a README.md with a screenshot of the dashboard showing real data (not the sample).
• Upload a 30-second screen recording showing the drag-and-drop upload, chart switching, and data table filtering.
• If you added customizations (pivot table, conditional formatting), call them out as separate features.
• Link to this from your LinkedIn profile under “Projects” — hiring managers in analytics and consulting roles specifically look for candidates who can demonstrate data visualization skills beyond “I know Tableau.”

What’s next

In the next lesson, you will build something more structured: a Database Schema Designer that takes plain English entity descriptions and generates ER diagrams, SQL CREATE TABLE statements, and sample data. Same pattern — showcase, prompt, output, customize — but with React and Vite instead of a single HTML file.