A dashboard in HTML built from your own data

A spreadsheet with a few hundred rows of sales will answer any question, as long as you know where to click and what to add up. A dashboard answers two or three questions, but it answers them at a glance: a tile with the month’s revenue, a chart month by month, a table of products starting with the best seller. You read a view like that in a few seconds, and when you show the data to a client, it looks a great deal better than a spreadsheet, too.

Export to CSV, without personal data

Pick an export you already look at in a spreadsheet regularly, such as sales from your online shop or hours from your time-tracking software. Export it as a CSV file. CSV is plain text holding only the data, with no colours, formulas or spreadsheet layout, and it is the easiest kind of file for an AI agent to work with. Most systems offer a CSV export next to the Excel one, and an Excel file you already have can be saved as CSV from Excel itself.

Before the file goes into the folder where you work with Claude Code, remove the columns with personal data: customers’ names, email addresses, phone numbers, delivery addresses. Everything Claude Code reads from a file goes, along with the conversation, to the model provider’s servers, and a sales dashboard only needs columns like date, product, sales channel, quantity and revenue anyway. In a timesheet, remove the column with employees’ names or replace the names with job titles. Make this one change in the program itself, not through Claude Code: when exporting, tick only the columns you need, and if the program doesn’t let you, delete them in the spreadsheet before saving as CSV. The point is that Claude Code never sees that data at all.

No export to hand that you’d like to practise on? Ask Claude Code to make one up:

Create a file called sales.csv with made-up sales for a small online shop over the last six months: about 300 rows, with the columns date, product, sales channel, quantity, revenue. No personal data. Save it so that it opens correctly in Excel on my computer.

The name sales.csv is only an example. It’s what the data file is called in the rest of this lesson, so type the name of your own file in the prompts.

Describe the columns before the first chart

A dashboard built on a misread column shows wrong numbers, nicely presented. So start by asking Claude Code to describe what it sees in the file. Type this prompt and every one after it in a single conversation with Claude Code, started in the folder that holds the file, because each one builds on what the previous one settled.

Read the file sales.csv and describe each column: what it contains, what format the dates and amounts are in, and what period the data covers. List separately what you read directly from the file and what you are guessing. Don't create anything yet and don't change the file.

In the reply, check the guesses first. Does Claude Code take 03/04 as 3 April or 4 March? Is revenue the net amount or the gross amount, including VAT? Is the last row of the file an ordinary sale, or a “Total” row that would be counted a second time when adding up? When something is wrong, say plainly how it is, for example: “The dates are day/month/year, and revenue is the gross amount including VAT.”

If the description shows odd symbols in place of accented letters, or all the data sitting in one column, the problem is in how the file was saved, not in the data. Files from programs set to many European languages separate columns with semicolons and write amounts with a decimal comma. Tell the AI agent what you see and ask it to read the file again with a different encoding or separator. Leave the file as it is. Claude Code can handle reading it.

The questions the dashboard should answer

Asking to “make some charts out of this” usually ends with a page that shows everything, while no number answers the question you actually open this data with. Settle two or three questions with Claude Code first. For sales, they might be: what revenue did the shop make each month, which sales channel brings in the most, which products sell best. For a timesheet: how many hours went into each project, and how they spread across the weeks.

I want to make a dashboard from this file. Before you do anything, ask me a few questions about what I want to learn from this data, then write down two or three questions the dashboard should answer.

A dashboard in a single HTML file

Claude Code writes the dashboard, and you get a single HTML file that opens in your browser like a web page, only without the internet. You don’t write or fix the code by hand: every change is something you ask for in the conversation.

Make a dashboard in a single HTML file that answers these questions. Put the data from sales.csv into the page, and have the page's code calculate the totals, averages and percentages from that data, without typing in ready-made numbers. Draw the charts without libraries downloaded from the internet, so that the file works offline. Don't change sales.csv. When you're done, tell me the name of the dashboard file.

Having the page’s code do the calculating is the most important part of this prompt. In our experience, when an AI agent types numbers into a dashboard itself, it can get even a simple total or percentage wrong. The page’s code calculates from the data the same way every time.

You’ll find the finished file in the folder where you work with Claude Code. Double-click it and it opens in the browser you use every day. A well-made dashboard is a page with number tiles at the top, charts below them and a table. If the page is blank, or there’s an empty box where a chart should be, describe to Claude Code exactly what you see, for example “the page is white, there’s nothing on it” or “the sales channel chart doesn’t show, everything else works”, and ask for a fix.

The dashboard file contains all the data from the export, including data that doesn’t appear on any chart. Whoever you send the file to gets all that data along with it.

Checking the dashboard’s numbers against the original

The page’s code doesn’t get the arithmetic wrong, but it adds up whatever Claude Code told it to. If Claude Code counted the “Total” row as an ordinary sale, or took the net amount instead of the gross, the total will be calculated flawlessly and still be wrong. So before you show the dashboard to anyone, check two or three numbers against the original: one total for the whole period, one for a chosen month or sales channel, and one percentage or average.

To check, open sales.csv in Excel or another spreadsheet. When you select the revenue column, Excel shows the sum of the selected cells in the bar at the very bottom of the window, and once you turn on a filter, say for March only, it adds up only the visible rows. If you can’t see the sum at the bottom, type =SUM(E:E) into an empty cell in another column, where E is the letter above the revenue column. You get the total for the whole period, including the “Total” row if the export has one, so in that case subtract it from the result.

If, once the file is open in Excel, all the data sits in one column or the sum comes out as 0, Excel hasn’t recognised the amounts as numbers. It’s the same semicolon and decimal comma problem as with the column description. Ask Claude Code for a copy of the file saved so that it opens correctly in Excel on your computer, and check the numbers in that copy.

When a number doesn’t match, don’t just write “fix it”. Give Claude Code both numbers and ask it to show how it arrived at its own:

Revenue for March on the dashboard is 48,210, but in sales.csv I get 45,930. Show me which rows and which column you're adding up for this total, and only then suggest a fix.

The amounts in this prompt are made up, so put in your own. The explanation usually shows the cause, and you can see straight away whether the fix addresses the right thing.

Fixing the layout and charts

Change the dashboard’s look one change per request, and name what you see on the screen: “move the revenue tile to the front and add the change from the previous month”, “keep only the top ten items in the product table”. Several changes in one request are harder to check afterwards, and when something breaks, there’s no telling which change did it.

Change over time, such as revenue month by month, reads best as a line chart, and a comparison of products or sales channels as bars sorted from the largest. Colours should mean something and stay the same: if the online shop is blue on one chart, it should be blue on every other one too. You can simply ask for that:

Use the same colours on all the charts: each sales channel should have the same colour everywhere, and label every chart with what each colour means.

After a bigger rebuild, such as a new chart or a change to the table, check one total from the dashboard against the original again. In a rebuild Claude Code also rewrites the code that does the calculating, and a number that matched before can change.

A button for loading a new export

Next month a new export arrives, and the dashboard should show the new numbers without another conversation with Claude Code. Ask for a button that lets you load a new CSV file without the AI’s help:

Add a button to the dashboard that lets me load a new CSV file with the same columns. After loading, the dashboard should recalculate all the numbers, charts and the table from the new data. If one of the columns is missing from the file, the page should say so instead of showing empty charts. The file must still work offline.

Test the button on a file that differs from the first one: a new export, or a copy that Claude Code adds a few rows to.

Make a copy of sales.csv called sales-test.csv and add five rows of sales from the following month to it. Don't change the original.

Open the dashboard, load sales-test.csv with the button and check two things: the numbers have changed, and the total for the whole period matches the total calculated in the spreadsheet for the same file. If nothing changes after loading, or the page shows a message about a missing column, describe it to Claude Code together with the name of the file you’re loading.

Your browser reads the new export on your computer. Claude Code no longer reads that file, so its data doesn’t reach the model.

Data loaded with the button stays on the dashboard until you close the browser tab. When you open the file again, the dashboard shows the data from the first export once more, so you load the latest CSV file again.

What to take away from this lesson

• Give AI spreadsheet data as CSV, without personal data. You remove the columns with names and addresses in the program, before Claude Code sees the file.
• Column description first, charts second. A misread date or a total row spoils every number on the dashboard.
• The page’s code does the calculating, and you do the checking. Two or three numbers compared with the original are what separate a dashboard that looks right from one that is right.
• One fix per request, and after a bigger rebuild, one number checked again.
• The dashboard file carries all the data from the export. Send it to someone and you send them that data too.

Tasks

• Export saved as CSV, without columns of personal data
• Claude Code’s column description read, guesses corrected
• Two or three questions for the dashboard settled
• Dashboard open in the browser, all charts visible
• Two or three numbers from the dashboard checked in the data file
• One layout or colour fix made, and after a bigger rebuild, one number checked again
• Test file loaded with the button, total matching the spreadsheet