Dashboards
Build interactive dashboards combining charts, pivot tables, data tables, and reports into unified views.
Table of Contents
- Everything You Need Is Already Here
- Just Ask Athena
- Example: CFO Analytics Dashboard
- The Building Blocks
- How to Build Your Dashboard
- Next: Make It Fast
Everything You Need Is Already Here
You have the data. You have the data warehouse — DuckDB for fast embedded analytics, ClickHouse for enterprise scale. You have powerful OLAP engines that handle everything from 100 rows to 10 billion. You have data-driven web components — pivot tables, charts, data grids, and parameterized reports — ready to drop into any page.
And you have Athena.
So what would stop you from building the best BI dashboards in the world?
Nothing. Absolutely nothing.
Just Ask Athena
Building a dashboard with ReportBurster starts with a conversation. Open a chat with Athena and tell her what you need:
"Athena, give me an HTML mockup of a BI Analytics dashboard for our CFO — which KPIs do you think they would look for?"
Athena doesn't just generate a layout. She thinks about who will use the dashboard, what decisions they need to make, and which metrics actually matter. She'll suggest KPIs you hadn't considered, organize them into logical sections, and hand you a working HTML mockup — complete with charts, tables, and a professional design.
From there, you iterate. Change the KPIs. Adjust the layout. Add a department filter. Swap a bar chart for a line chart. Each conversation turn refines the dashboard until it's exactly what you need.
Then take the mockup and wire it up to your real data using ReportBurster's web components — or ask Athena to help you do that too.
Example: CFO Analytics Dashboard
Here's what Athena produced when asked to design a CFO dashboard over the Northwind sample data warehouse. Revenue trends, profit margins, AR aging, top customers, geographic distribution — all the KPIs a CFO actually looks at, organized for executive decision-making:
Key CFO KPIs in this dashboard:
- Financial Health — Total Revenue ($847K) + growth trend, Gross Profit ($292K) + margin (34.5%), Outstanding AR ($128K)
- Operational Performance — Total Orders (1,247), avg. $680/order, Days Sales Outstanding (28 days, below 30-day target)
- Customer & Product Insights — Top Customer: Save-a-lot Markets ($89K), Top Product: Côte de Blaye, Top Region: Germany (23.4%)
- Risk Management — AR Aging buckets ($42K at risk in 60+ days), Revenue by Country (geographic concentration)
The dashboard uses a dark theme with glassmorphism effects — professional, modern, and data-dense for executive decision-making.
Ready for more tests!
This is a single-prompt mockup — Athena generated it from one request. Imagine what you'll build with a few more turns of conversation, tailored to your own data and KPIs.
The Building Blocks
Every dashboard you build with ReportBurster is assembled from these components:
| Component | What It Does | Dashboard Use |
|---|---|---|
<rb-pivot-table> | Multi-dimensional drag-and-drop analysis | Revenue breakdowns, cross-tabulations, ad-hoc exploration |
<rb-chart> | Bar, line, pie, area, scatter, and more | KPI trends, distributions, comparisons |
<rb-tabulator> | Interactive data grid with sorting, filtering, pagination | Detail tables, transaction lists, drill-down views |
<rb-parameters> | Date pickers, dropdowns, filters | Dashboard-wide filters (date range, department, region) |
<rb-report> | Complete report viewer combining all of the above | Full self-contained report pages |
Each component connects to your data through ReportBurster's backend — whether that data lives in a transactional database, DuckDB, or ClickHouse. Mix and match them on a single page to create exactly the dashboard you need.
How to Build Your Dashboard
1. Design with Athena Describe your audience and goals. Athena suggests KPIs, generates an HTML mockup, and iterates with you until the layout is right.
2. Set up your data Configure database connections and, if needed, a data warehouse with DuckDB or ClickHouse for analytical performance.
3. Configure reports Two approaches: create a separate report for each dashboard widget, or use a single multi-component report that defines all visualizations and datasets in one place. Either way, each component gets an embed code.
4. Assemble the dashboard Paste the embed codes into the FlowKraft Frontend App, your own web application, or any HTML page. The components render automatically.
5. Iterate Refine layouts, add filters, adjust queries. The components are live — changes in ReportBurster's configuration are reflected immediately in the dashboard.
Tip: You can embed ReportBurster dashboards in any web application — plain HTML, WordPress, Angular, Vue, React, Next.js, Grails, or anything that renders HTML. The web components are framework-agnostic.
Next: Make It Fast
Your dashboard is designed and assembled. Now make it performant. The Performance & Real-Time guide covers the implementation details — multi-component report configuration, efficient data loading with componentId, Redis caching for expensive queries, and real-time data patterns.