Skip to content

Interactive Board Example

A board with variables and filters that update charts dynamically.

Complete Board

title: "Sales Board with Filters"

variables:
  region:
    input: select
    options:
      static: ["All", "North", "South", "East", "West"]
    default: "All"

  date_range:
    input: daterange
    default: "2024-01-01"

  min_revenue:
    input: slider
    min: 0
    max: 1000000
    step: 1000
    default: 10000

queries:
  filtered_sales:
    metrics: [total_revenue, order_count]
    dimensions: [month, region]
    filters:
      region: "{{ region }}"
      order_date: "{{ date_range }}"
      total_revenue: "{{ min_revenue }}"

rows:
  - title: "Filtered Sales View"
    grid:
      columns: 12
      items:
        - item: revenue_chart
          width: 6
        - item: orders_chart
          width: 6
        - item: sales_table
          width: 12

    charts:
      revenue_chart:
        title: "Revenue by Month"
        query: queries.filtered_sales
        type: bar
        x: month
        y: total_revenue
        color: region

      orders_chart:
        title: "Orders by Month"
        query: queries.filtered_sales
        type: line
        x: month
        y: order_count

      sales_table:
        title: "Sales Details"
        query: queries.filtered_sales
        type: table

How Variables Work

Variable Definition

Variables are defined at the board level:

variables:
  region:
    input: select
    options:
      static: ["All", "North", "South", "East", "West"]
    default: "All"
  • input: The UI component (select, slider, daterange, etc.)
  • options: Available options (static list or dynamic query)
  • default: Initial value

Wiring Variables to Queries

Variables are referenced in query filters:

queries:
  filtered_sales:
    metrics: [total_revenue, order_count]
    dimensions: [month, region]
    filters:
      region: "{{ region }}"
      order_date: "{{ date_range }}"
      total_revenue: "{{ min_revenue }}"

When a variable changes, the query automatically re-executes with the new filter values.

User Interaction Flow

  1. User selects region from dropdown → region variable updates
  2. User adjusts date range → date_range variable updates
  3. User moves slider → min_revenue variable updates
  4. Query re-executes with new filter values
  5. Charts update automatically with new data

Key Concepts

Handling "All" Values

When a variable can be "All", use conditionals:

filters:
  region: "{{ region }}"

This shows all regions when "All" is selected, otherwise filters to the selected region.

Multiple Variable Types

This example shows three common variable types: - Select: Single choice dropdown - Date range: Date range picker - Slider: Numeric range input

Grid Layout with Multiple Charts

Using grid layout to show multiple charts:

grid:
  columns: 12
  items:
    - item: revenue_chart
      width: 6
    - item: orders_chart
      width: 6
    - item: sales_table
      width: 12

Extensions

Add More Variables

Add additional filters:

variables:
  product_category:
    input: multiselect
    options:
      static: ["Electronics", "Clothing", "Food", "Books"]
    default: ["Electronics", "Clothing"]

Dynamic Options

Load options from a query:

variables:
  product:
    input: select
    options:
      query: queries.product_list