About HTML Charts
A library of 41 dashboard charts built by Kai Jones, a data analyst, to get better visuals out of a BI tool without waiting for new features or installs.
Why it exists
Dashboards in big BI tools are good at grids and basic charts, but the visuals analysts actually want – scorecards next to trends, funnels, cohort heatmaps, pacing against target – often mean a plugin, an admin, or a wait. The BI tool's API wasn't an option either: single sign-on blocked it. But the tool could run a little HTML and JavaScript in a container on the page, and the data was already on that page in a grid.
So each chart reads the grid the viewer can already see, and redraws it. No API, no install, no server – and because it only reads what's on screen, the viewer's normal permissions still apply.
How it works
- Finding the grid. The chart looks for column headers by their text, ignoring spaces and capitals, and picks the set that sit on the same row – so a field list elsewhere on the page doesn't confuse it.
- Reading the rows. Each cell is placed under a column by its position on screen, so blank cells and merged labels don't shift values. Merged labels are carried down; totals are skipped.
- Big grids. BI grids only draw the rows on screen. The chart scrolls the grid's own scroll box, waits for each batch to load, keeps what it has read, and only draws once every row is in – with a progress screen instead of half a chart.
- Staying live. It watches the page and re-reads when filters change the grid, with a cheap check first so it doesn't loop.
- Safe to embed. Every script is versioned and loaded with an SRI hash; Chart.js is self-hosted with a fallback. Nothing is uploaded.
- Tested on random data. Each chart is checked against totals worked out independently from the demo grid, on load and after shuffling.