Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Create Dashboard displays.

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


This Tutorial Teaches you to:

Design executive and operational dashboards with KPIs, charts, and summary information for different user levels. What You'll Learn

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

Prerequisites

  • Tags and historian configured
  • Basic display knowledge
  • Charts / Gauges

Table of Contents
maxLevel2
minLevel2
indent10px
excludeTutorial
stylenone



1. Create Display

  1. Navigate to Displays → Draw

  2. Click Create a New Document

  3. Name: Dashboard_System

  4. Template: Dashboard

  5. Click OK



2.. Add Charts / Gauges

  1. Add TrendChart by dragging and drop them into the Placeholders

  2. Add Temperature pens to the chart

  3. Add different Gauges

  4. You can customize the display to have any symbol or graphical component available


In this section...

Page Tree
root@parent
spaces93DRAF

Step 1: Dashboard Layout

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

Step 2: 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%)

Step 3: Production Metrics

Add production counter card:

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

Step 4: 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

Step 5: 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;

Best Practices

  • Keep it simple (5-7 KPIs max)
  • Use consistent time periods
  • Clear visual hierarchy
  • Test on different screen sizes

Next Steps

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