Tutorial: Building a Dashboard

In this tutorial, you will use the MATIH BI Workbench to create an interactive analytics dashboard. You will add visualizations, arrange them in a grid layout, configure filters, and share the dashboard with your team.

What You Will Learn

• How to create a new dashboard in the BI Workbench
• How to add chart widgets from SQL queries or natural language questions
• How to arrange widgets using the drag-and-drop grid layout
• How to configure dashboard-level filters and date ranges
• How to save, publish, and share dashboards

Prerequisites

Step 1: Open the BI Workbench

Navigate to the BI Workbench:

• Local development: http://localhost:3000
• Cloud deployment: https://bi.{your-tenant}.matih.ai

Log in with your tenant credentials. You will see the dashboard gallery showing any existing dashboards and a Create Dashboard button.

Step 2: Create a New Dashboard

1. Click Create Dashboard.
2. Enter a name: Retail Analytics Overview.
3. Optionally add a description: Monthly overview of retail performance metrics.
4. Click Create.

The dashboard editor opens with an empty canvas. The canvas uses a grid layout system powered by react-grid-layout, where widgets can be placed, resized, and rearranged by dragging.

Step 3: Add a KPI Widget

KPI widgets display single metrics prominently.

1. Click Add Widget in the toolbar.
2. Select KPI Card from the widget type menu.
3. Configure the data source:

Query method: SQL

SELECT
    SUM(total_amount) AS total_revenue,
    COUNT(*) AS total_orders,
    AVG(total_amount) AS avg_order_value,
    COUNT(DISTINCT customer_id) AS unique_customers
FROM orders
WHERE order_date >= DATE_TRUNC('month', CURRENT_DATE)

Or use natural language:

What are the total revenue, order count, average order value,
and unique customers this month?

4. Map the result columns:

   • Primary value: total_revenue
   • Format: Currency ($)
   • Label: Total Revenue This Month

5. Click Add to Dashboard.

The KPI card appears on the canvas. Drag it to the top-left corner and resize it.

Step 4: Add a Line Chart (Revenue Trend)

1. Click Add Widget.
2. Select Line Chart.
3. Enter the query:

SELECT
    DATE_TRUNC('day', order_date) AS date,
    SUM(total_amount) AS daily_revenue
FROM orders
WHERE order_date >= CURRENT_DATE - INTERVAL '30' DAY
GROUP BY DATE_TRUNC('day', order_date)
ORDER BY date

4. Configure the chart:

   • X-axis: date (Date)
   • Y-axis: daily_revenue (Currency)
   • Title: Daily Revenue (Last 30 Days)
   • Color: Blue (#2563EB)

5. Click Add to Dashboard.

Position the line chart below the KPI cards. Drag the resize handle to make it span the full width.

Step 5: Add a Bar Chart (Top Categories)

1. Click Add Widget.
2. Select Bar Chart.
3. Enter the query:

SELECT
    p.category,
    SUM(o.total_amount) AS revenue,
    COUNT(*) AS order_count
FROM orders o
JOIN products p ON o.product_id = p.id
WHERE o.order_date >= DATE_TRUNC('month', CURRENT_DATE)
GROUP BY p.category
ORDER BY revenue DESC
LIMIT 10

4. Configure the chart:

   • X-axis: category
   • Y-axis: revenue (Currency)
   • Title: Top 10 Categories by Revenue
   • Orientation: Horizontal

5. Click Add to Dashboard.

Place this chart in the left half of the next row.

Step 6: Add a Pie Chart (Customer Segments)

1. Click Add Widget.
2. Select Pie Chart.
3. Enter the query:

SELECT
    c.segment,
    COUNT(*) AS customer_count,
    SUM(o.total_amount) AS total_spend
FROM customers c
JOIN orders o ON c.id = o.customer_id
WHERE o.order_date >= DATE_TRUNC('quarter', CURRENT_DATE)
GROUP BY c.segment
ORDER BY total_spend DESC

4. Configure the chart:

   • Slice: segment
   • Value: total_spend
   • Title: Revenue by Customer Segment
   • Show labels: Yes
   • Show percentages: Yes

5. Click Add to Dashboard.

Place this chart in the right half, next to the bar chart.

Step 7: Add a Data Table

1. Click Add Widget.
2. Select Data Table.
3. Enter the query:

SELECT
    o.id AS order_id,
    c.name AS customer_name,
    p.name AS product_name,
    o.total_amount,
    o.status,
    o.order_date
FROM orders o
JOIN customers c ON o.customer_id = c.id
JOIN products p ON o.product_id = p.id
WHERE o.order_date >= CURRENT_DATE - INTERVAL '7' DAY
ORDER BY o.order_date DESC
LIMIT 100

4. Configure the table:

   • Title: Recent Orders (Last 7 Days)
   • Sortable columns: Yes
   • Pagination: 20 rows per page
   • Column formatting:
     • total_amount: Currency
     • order_date: Date (MMM DD, YYYY)

5. Click Add to Dashboard.

Place the table at the bottom of the dashboard, spanning the full width.

Step 8: Arrange the Dashboard Layout

The dashboard layout is based on a 12-column grid system. Each widget occupies a configurable number of columns and rows.

Recommended Layout

To rearrange widgets:

• Move: Drag the widget by its title bar.
• Resize: Drag the resize handle in the bottom-right corner.
• Lock position: Click the lock icon to prevent accidental moves.

Step 9: Configure Dashboard Filters

Add interactive filters that apply across all widgets.

1. Click Filters in the toolbar.

2. Click Add Filter.

3. Configure a date range filter:

   • Type: Date Range
   • Label: Time Period
   • Default: Last 30 Days
   • Variable name: date_range

4. Add a category filter:

   • Type: Dropdown
   • Label: Category
   • Source query:

     SELECT DISTINCT category FROM products ORDER BY category
   • Variable name: category
   • Allow multiple: Yes

5. Click Apply.

Using Filter Variables in Queries

Update your widget queries to use the filter variables:

SELECT
    DATE_TRUNC('day', order_date) AS date,
    SUM(total_amount) AS daily_revenue
FROM orders o
JOIN products p ON o.product_id = p.id
WHERE o.order_date BETWEEN :date_range_start AND :date_range_end
  AND (:category IS NULL OR p.category IN (:category))
GROUP BY DATE_TRUNC('day', order_date)
ORDER BY date

When users change the filter values, all widgets refresh automatically.

Step 10: Configure Auto-Refresh

For dashboards displayed on monitors or shared screens:

1. Click Settings (gear icon) in the toolbar.
2. Enable Auto-refresh.
3. Set the interval: 5 minutes.
4. Click Save.

The dashboard will automatically re-execute all queries and update the visualizations at the configured interval.

Step 11: Save and Publish

Save as Draft

Click Save to save the dashboard as a draft. Only you can see draft dashboards.

Publish

1. Click the dropdown next to Save and select Publish.
2. Choose visibility:
   • Private: Only you can view
   • Team: Members of your team can view
   • Tenant: All users in your tenant can view
3. Click Publish.

Published dashboards appear in the dashboard gallery for all users with the appropriate visibility.

Step 12: Share the Dashboard

Share Link

Click Share to generate a shareable URL. You can configure:

Export

Visualization Library

The BI Workbench supports these visualization types through its D3.js-based rendering engine:

Troubleshooting

Next Steps

With your first dashboard created, proceed to Training a Model to learn how to use the ML Workbench for machine learning.