Skip to main content

Tile types

A dashboard is a grid of tiles. QRY has four tile types, each with a clear purpose. Mixing them well — especially KPIs at the top, a couple of trend charts beneath, and a detail table below — is what separates a dashboard people actually look at from one that gets created and forgotten.

Chart​

ECharts-rendered. Supports bar, line, pie, scatter, area, combos (line over bar), and heatmap.

When to use​

  • Trends over time → line or area.
  • Compare a few categories → horizontal bar.
  • Show breakdown of a total → pie (only if you have ≤6 categories — otherwise a sorted bar).
  • Two-axis correlation → scatter.
  • Density across two dimensions (e.g. day-of-week × hour) → heatmap.

Configuring​

A chart tile needs:

  1. Datasource + SQL query.
  2. X-axis column.
  3. Y-axis column (numeric).
  4. Optional series column for the colour group / stack.

ECharts options (legend, tooltips, colours, axis labels) are exposed in an Advanced panel. For most dashboards, defaults are fine.

Gotchas​

  • A line chart with too many series becomes spaghetti. Filter to the top N before plotting.
  • Pie charts with >6 slices are unreadable. Group small categories into "Other".
  • Heatmaps need both X and Y to be discrete (categorical or bucketed numeric). Continuous-on-continuous is a scatter, not a heatmap.

KPI​

A single big number with optional comparison and sparkline. Great for the top row.

When to use​

  • A single metric the dashboard is "about" — Total revenue, Active customers, Orders this month.
  • A metric that should pop — KPIs are the largest visual element on the dashboard.

Configuring​

A KPI tile needs:

  1. Datasource + a SQL query that returns one row, one numeric column.
  2. Optional a comparison query (e.g. previous period) — QRY calculates the delta and shows it as ↑ +12% or ↓ -3%.
  3. Optional a sparkline query returning a time series the same metric — rendered as a small inline line below the number.

Gotchas​

  • The KPI query must return exactly one row, one column. Returning more rows surfaces only the first.
  • The comparison's sign convention assumes "higher = good". If your metric is "errors" or "churn", flip it in SQL or in the Advanced panel.
  • Sparklines reuse the main query's filter context — make sure the time range is on the X axis and the metric on the Y axis.

Table​

Paginated rows, with sort and CSV export. Boring on purpose.

When to use​

  • Detail under a chart — "the chart shows the trend, the table shows the underlying rows".
  • When the answer genuinely is a list — Top 20 customers by revenue.
  • For ad-hoc data exploration without committing to a visual.

Configuring​

A table tile needs:

  1. Datasource + SQL query.
  2. Optional column-level configuration: rename, format (number / percentage / currency), hide.
  3. Optional a row-click handler that opens another dashboard, a conversation, or a URL.

Gotchas​

  • Don't paginate-of-doom. If your query returns 100,000 rows the table will load them all (no server-side pagination yet). Bound the query: LIMIT 1000 or filter to a useful subset.
  • Sorting is client-side per page. For large data, sort in the SQL.
  • Currency formatting only knows the format string you give it — QRY doesn't do FX conversion.

Text​

Markdown rendered to HTML. Headers, lists, links, images.

When to use​

  • A title for a section of the dashboard.
  • Notes between tiles ("In the chart below, active means at least one purchase in the last 90 days").
  • A header with the dashboard owner's name and contact for ambiguity.

Configuring​

Just a Markdown body. Supports the usual: # headers, **bold**, [links](https://...), lists, code blocks, tables, inline images via ![](...).

Gotchas​

  • Text tiles don't have access to query results — they're static Markdown. You can't insert a live KPI value into a text tile (use a KPI tile next to it instead).
  • HTML embedded in Markdown is sanitised; <script> etc. are stripped.

Putting it together​

A common, well-functioning layout:

[ KPI: Total revenue ]  [ KPI: Active customers ]  [ KPI: Avg basket ]

[          Chart: Revenue by month, last 12 months          ]

[ Chart: Revenue by region ]    [ Chart: Top 5 categories  ]

[                Table: Detail rows for click-through       ]

[              Text: notes / definitions / contact          ]

Top-down: at-a-glance numbers, then the trend, then the breakdown, then the detail, then the metadata.

See also​

QRYA product of IXEN.