Timeline Card Widget

Use Timeline Card when each SQL row is an event on a horizontal timeline (for example review calls or milestones). Selecting a marker shows that event’s detail card.

Create the widget

1. Open Widgets → Edit (or create a new question).
2. Write a SQL query that returns one row per event.
3. In Visualization Setting, choose Timeline Card under Other.
4. Map columns (date is required). Save the widget, then add it to a dashboard.

Required SQL shape

Column role	Required	Example column names	Notes
Date	Yes	report_date, date	Date, timestamp, ISO, or month-year like 03-2023 / 2023-03
Marker label	No	label	e.g. Oct 2023; auto from date if empty or null
Title	No	title, company_name	Card heading
Subtitle	No	subtitle	Line under the title
Content	No	content, summary	Plain text, JSON array string, or newline-separated paragraphs
Metric value	No	metric_value, sentiment_score	Raw number; scaled to % with Metric min / max
Metric label	No	metric_label, sentiment	e.g. POSITIVE

Example query

SELECT
  id,
  review_date AS date,
  TO_CHAR(review_date, 'Mon YYYY') AS label,
  company_name AS title,
  'Review Call – ' || TO_CHAR(review_date, 'Month YYYY') AS subtitle,
  summary_text AS content,
  sentiment_score AS metric_value,
  sentiment_label AS metric_label
FROM review_calls
ORDER BY review_date ASC;

Content formats

• Markdown is supported in the content body (**bold**, lists, links, headings, etc.)
• Single string → rendered as markdown
• JSON array string ["First update","Second update"] → joined as markdown paragraphs
• Newline-separated text → preserved in the markdown source

Metric display

In Visualization Setting:

• Show metric — when on, the circular score appears in the top-right of the card. Map a Metric value column.
• Metric min / max — scale the raw value to a percent: (value − min) / (max − min) × 100. Defaults are 0 and 100. Example: 0.85 with min 0 and max 1 → 85%.
• Show metric confidence — when on (requires Show metric), the label under the % is shown (e.g. POSITIVE). Map a Metric label column.

Both display toggles are off by default. The chronologically first event is selected by default. The timeline axis stays sticky while you scroll the card.

Nested content (transcript)

Enable Show nested content to add a Show transcript excerpt button under the card body. Clicking it expands a nested block (e.g. transcript lines).

• Map Nested content column to a field that is a JSON array of strings, an array of segment objects (text / content), or newline-separated text.
• Set Nested section title (default Transcript) — used in the button label as SHOW {TITLE} EXCERPT.

Example values:

["Hello, thanks for joining.", "Revenue is up 12% this quarter."]

or transcript_segments_json with objects that include a text field.

Layout

In Visualization Setting → Layout:

• Timeline width / Card width — Default (extra large), Small through Full, or Custom % (10–100).
• Card min height — leave empty for default 280px.

Same-month events share one axis marker (with a count badge). Selecting that month opens a blurred carousel of detail cards — use arrows, dots, side cards, or ←/→ keys to move between them.

Typography

In Visualization Setting → Typography (same sizing control as bar charts):

• Marker labels, Title text, Subtitle text, Body text
• Each offers Default (Npx), semantic presets (Caption → Display), or custom pixels.

Style

In Visualization Setting → Style:

• Theme — same chart themes as bar chart (Default, Blue, Violet, …). Colors the timeline axis, nested toggle, and metric ring.
• Default theme uses a neutral gray accent so the metric circle stays readable (not green/red).
• Under Metric, optionally set a custom Metric ring color hex to override the theme accent.

All setting categories start collapsed; open one section at a time.

Column mapping

Visualization Setting auto-guesses common column names when you first select Timeline Card. You can override any mapping. Only Date column is required; other fields are optional.