Ask AI to build a small offline dashboard from a CSV
Every month the same catering export lands in your inbox, and every month three people ask you for their site's total. A one-file dashboard they can open and filter themselves would end that, as long as its numbers are right.
Example output
A one-file catering dashboard
Fictional September orders: 36 rows, £3,190.50 in total, with one amount missing and counted as missing.
| Record | Group | Amount (GBP) |
|---|---|---|
| r1 | A | £10.00 |
| r2 | A | £0.00 |
| r3 | A | Unavailable |
| r4 | B | £5.00 |
Read the prompt
Build a small offline HTML/JavaScript dashboard for this supplied CSV
and data dictionary. Answer [specific question] with [needed filters].
Preserve record IDs, valid zero and missing values; apply the supplied
duplicate policy. Show included rows, known subtotal and missing count.
Keep processing local: no external libraries, network calls, tracking,
credentials or service integrations. Provide the actual files and a
plain explanation. Include independent known-answer and awkward cases
for filters, blanks, quotes and invalid input; do not claim production readiness.What you'll make
a single HTML file that opens in a browser with no internet connection, with two filters, a total, a row count and one small chart, built from your CSV.
What you'll need
a CSV your organisation lets you use with your work AI account, a tool that can build and preview a web page (Claude with artifacts, the ChatGPT desktop app or Gemini Canvas) and about 20 minutes. If you only need one answer once, a spreadsheet filter or pivot table is faster. Build a dashboard when the same export comes round every month and other people need to filter it.
1. Ask for one file that answers one question
Decide the question first: “How much did each site spend, by category?” Then name the filters people will use and what each row means. Upload the CSV or paste a few rows with the headers.
In Claude, the dashboard opens as an artifact beside the chat, and you can save the file from there. In Gemini, click Add files › Canvas below the text box before you send the prompt. In the ChatGPT desktop app, a generated .html file can open as an interactive preview. If any tool gives you only code, save it as dashboard.html and open it in your browser.
Make a single HTML file I can open offline. Don't load anything from the internet.
It should answer: [question]. Add filters for [filters].
Show the number of rows and the total for the current filter, and one small bar chart.
Read the CSV properly: a quoted value such as "Bread, Butter & Co" is one field.
Treat a blank amount as missing, not zero, and show how many are missing.[question] is the one thing the dashboard answers; [filters] are the columns people filter by, such as site and category.
Why this works: one question keeps the tool small enough to check. Asking for the row count puts the number you’ll check first on screen.
What you should see: a working dashboard with your filters, a row count, a total and a chart that changes when a filter changes.
2. Check the counts against the file
Open the CSV in a spreadsheet. Compare three numbers with the dashboard: the total row count, the grand total, and one filtered total, such as one site. If any of them differ, don’t fix it by eye. Ask the AI to find the rows responsible.
The dashboard shows [dashboard figure], but the file gives [file figure].
List the rows the dashboard didn't count or read differently, with their row numbers and raw text.
Explain the cause before changing anything.[dashboard figure] and [file figure] are the two numbers that disagree, such as “32 rows” and “36 rows”.
Why this works: a wrong total tells you something is broken; a list of missing rows tells you what.
What you should see: the specific rows and the reason, such as a comma inside a supplier name.
3. Share it and say what it covers
Ask for a line at the top of the dashboard naming the file and month it was built from, such as “Built from catering-orders-sep-2026.csv, 36 rows”. Then send the HTML file. People can open it in a browser without your spreadsheet or an AI account.
Why this works: next month someone will open an old copy. The source line tells them which month they’re looking at.
What you should see: the file name and row count at the top, matching the CSV.
Check the result
- The dashboard’s row count matches the file’s row count (excluding the header).
- The grand total and one filtered total match a spreadsheet
SUMof the same rows. - Blank amounts are counted as missing, not added as £0.
- Changing a filter changes the total, the row count and the chart together.
The usual failure: a value with a comma inside it, such as a supplier called “Bread, Butter & Co”, splits into two columns. Its amount lands in the wrong place, the row is dropped, and the total comes out short with no warning. Spot it when the row count is lower than the file’s.
Rows with a comma inside a quoted value are being split or dropped.
Use a proper CSV parser that keeps quoted values together, then rerun the row count,
the grand total and each site's total, and show me the rows that changed.Worked example: a month of catering orders
Fictional example. The office manager wants Leeds and Bristol to see their own catering spend for September.
date,site,category,supplier,amount_gbp
2026-09-02,Leeds,Lunch,"Bread, Butter & Co",68.00
2026-09-03,Bristol,Drinks,Hilltop Coffee,42.50
2026-09-08,Leeds,Event,Grain Kitchen,
... 36 rows in total, grand total £3,190.50, one blank amount
Leeds £1,842.00 · Bristol £1,348.50First dashboard (wrong): “32 rows · Total £2,914.50”. The spreadsheet says 36 rows.
Repair: step 2’s prompt lists the four missing rows, all from “Bread, Butter & Co”. The repair prompt above fixes the parsing.
Repaired dashboard: “36 rows · Total £3,190.50 · 1 amount missing”. Leeds £1,842.00, Bristol £1,348.50.
- The four dropped rows came to £276.00: £3,190.50 − £2,914.50. The row count gave it away before anyone checked a total.
- The blank Grain Kitchen amount stays missing. Counting it as £0 would make the total look complete when it isn’t.
- The source line at the top says which file and month this is, so October’s copy can’t be mistaken for September’s.
Task kit for this job: Download (ZIP) · Reusable instructions
Go deeper
Check the sort before you trust a ranking
If the dashboard sorts by amount, test it with £9.50, £10.00 and £120.00. A text sort puts “£10.00” and “£120.00” before “£9.50”, because it compares characters, not values. Include two equal amounts and one blank too: equal amounts should keep their file order, and blanks should sort last in both directions. A sorted list isn’t a recommendation either. The cheapest-looking supplier may quote a different unit or leave out a fee.
The ascending sort puts £10.00 before £9.50. Sort the amount column by value, not as text.
Keep blank amounts last in both directions and keep equal amounts in file order.
Show me the sorted order for both directions.If your IT team will review it
Ask for no external libraries, no network calls and no tracking, so the file works offline and sends nothing anywhere. Ask that names from the CSV appear exactly as typed: a supplier name containing <b> should show those characters, not turn the text bold. A file that works offline is still not a live, connected dashboard. Feeds, sign-in and hosting are a separate project; see clickable prototypes.
When next month's file changes shape
If a column is renamed or a new site appears, the dashboard may still open and quietly miss rows. Keep the row-count check every month, and if a header changes, ask the AI to update the dashboard rather than guessing which old column matches. See data dictionaries.