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", "2024-12-31"]

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

queries:
  filtered_sales:
    sql: |
      SELECT month, region, SUM(revenue) AS total_revenue, COUNT(*) AS order_count
      FROM orders
      WHERE {{ filter('region', region) }}
        AND {{ filter_date_range('order_date', date_range) }}
        AND {{ filter('total_revenue', min_revenue, '>=') }}
      GROUP BY month, region

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

    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 the query SQL — the filter() helper skips the condition entirely when its variable is unset:

queries:
  filtered_sales:
    sql: |
      SELECT month, region, SUM(revenue) AS total_revenue, COUNT(*) AS order_count
      FROM orders
      WHERE {{ filter('region', region) }}
        AND {{ filter_date_range('order_date', date_range) }}
        AND {{ filter('total_revenue', min_revenue, '>=') }}
      GROUP BY month, region

When a variable changes, the query automatically re-executes with the new 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", filter() already does the right thing for an unset value; for an explicit "All" option, use a Jinja conditional in the SQL:

WHERE {{ filter('region', region if region != 'All' else None) }}

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: 24
  items:
    - item: revenue_chart
      width: 12
    - item: orders_chart
      width: 12
    - item: sales_table
      width: 24

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