Design Dashboard Displays (Tutorial) teaches you to:

  • Layout dashboard displays
  • Add KPI indicators
  • Configure charts
  • Auto-refresh data

Prerequisites

  • Tags and historian configured
  • Basic display knowledge

In this page:

    


Dashboard →  Tutorial | Concept | How-to Guide | Reference



Dashboard Layout

  1. Create new display: Dashboard_Main
  2. Set grid layout:
    • 3 columns × 2 rows
    • Margins: 10px
    • Responsive sizing

Add KPI Cards

Create KPI card for OEE:

  1. Add GroupBox (300×150)
  2. Inside add:
    • Title: "Overall OEE"
    • Large value: @Tag.OEE + "%"
    • Trend sparkline (last 24h)
    • Color indicator (Green >85%, Yellow >70%, Red <70%)

Production Metrics

Add production counter card:

  • Current shift production
  • Target vs actual
  • Run rate per hour
  • Percentage of target

Add Charts

Production Trend:

  1. Add TrendChart
  2. Show last 7 days
  3. Daily production totals
  4. Target line overlay

Downtime Pareto:

  1. Add BarChart
  2. Data: Top 5 downtime reasons
  3. Sort by duration
  4. Show percentages

Alarm Summary

Add alarm statistics panel:

  • Active alarms count
  • Unacknowledged count
  • Last alarm time
  • Mean time to acknowledge

Step 6: Auto-Refresh

Configure updates:

csharp

// Refresh every 30 seconds
Timer.Interval = 30000;
Timer.Tick += RefreshDashboard;

Next Steps

  • [Reports Module] - Scheduled reports
  • [Visualize on Web and Mobile] - Remote access

In this section...