Dashboard Panel Types Reference

Beacon Tower dashboards support 13 panel types for visualizing telemetry data, device properties, alarms, and custom content. This guide provides a complete reference for configuring each panel type programmatically or through the web UI.

For dashboard architecture and creation workflows, see Dashboards. For chart configuration details, see Charts.

Common Panel Configuration

All panel types share these base configuration fields:

Field	Description
Title	Panel heading displayed in the dashboard
Help Text	Optional tooltip text shown on hover
Visibility Conditions	Rules to show/hide panels based on property values
Select Nodes	Data source selection (see Data Source Patterns below)

Visibility Conditions

Control panel visibility dynamically based on device property values:

Property: Choose a reported or desired property from the asset model
Operator: =, !=, >, <, >=, <=
Value: Comparison value (numeric or string)

Multiple conditions can be combined (AND logic). Panels are hidden when conditions evaluate to false.

Data Source Modes

Panels retrieve data in one of two modes:

Relative Mode: Select Nodes is empty. Data source depends on current navigation context (tree node selection). Use this for dynamic dashboards that adapt to user navigation.
Absolute Mode: Select Nodes contains specific asset IDs. Panel always displays data from those assets regardless of navigation context. Use this for home dashboards or fixed monitoring views.

Panel Types Reference

Text

Static content panel supporting Markdown formatting.

Configuration:

Content: Markdown text rendered in the panel
No data source required

Use cases: Documentation, instructions, section headers, embedded images or links.

Active Alarms

Displays currently active alarms for selected assets.

Configuration:

Select Nodes: Assets to monitor (relative or absolute mode)
Refresh Interval: Auto-refresh frequency

Display columns: Severity, alarm name, triggered timestamp, asset name, acknowledgment status.

Use cases: Monitoring dashboards, alarm overview pages, asset-specific alarm lists.

Chart

Line chart for time-series telemetry data. Traditional chart type with standard configuration options.

Configuration:

Option	Values	Description
Refresh Interval	Min 1 minute	Auto-refresh frequency
Signals	Multiple selection	Telemetry signals to plot
Aggregation	Mean, Min, Max, Sum, Median, First, Last	Data point aggregation method
Interval	PT1M to P1Y	Aggregation bucket size (ISO 8601 duration)
Time Range	Last 1 hour to Last 30 days, Custom	Historical data window
Show Path	Boolean	Display full asset path in legend
Plotlines	See Plotlines section	Reference lines for thresholds

Data source: Historical telemetry from timeseries database. See Telemetry and Timeseries for aggregation details.

Intervals: PT1M (1 min), PT5M, PT15M, PT1H, PT12H, P1M, P1Y (ISO 8601 duration format). Custom intervals are also supported (e.g., "12 minutes").

Best practices:

Use longer intervals for longer time ranges to reduce data points and improve performance
First/Last aggregation useful for state changes or discrete values
Enable Show Path when charting signals from multiple assets

Chart V2

Enhanced chart panel with improved ECharts-based rendering and additional visualization options.

Configuration:

Same as Chart panel (signals, aggregation, intervals, time ranges)
Additional features: Improved performance, better legend handling, enhanced tooltip formatting

Use cases: Replacement for Chart panel in new dashboards. Provides better rendering for complex multi-signal charts.

Dynamic Chart (EChart)

Advanced visualization panel with custom JavaScript calculations and transformations.

Architecture: Custom JavaScript runs in Web Workers for safe, isolated execution. Scripts process input data and output global values or time-series lines.

Configuration:

Option	Description
Inputs	Define data sources for calculations
Outputs	Define visualization series or values
Plotlines	Reference lines (see Plotlines section)
Hidden Signals	Load signals without displaying them (available to calculations)

Input Types:

Static: Hard-coded numeric value
Desired Property: Property value from device twin (desired state)
Reported Property: Property value from device twin (current state)

Output Types:

Global Value: Single calculated value (displayed as text or in gauge)
Series: Time-series line for plotting

Script Environment:

Your JavaScript receives these variables:

inputData: Array of [timestamp, value] pairs for time-series inputs
inputValue: Direct value for static/property inputs
_: Lodash library
console.log: Logging support (visible in browser console)

Available Helpers:

multiply(a, b): Numeric multiplication
roundToDecimals(value, decimals): Round to N decimal places
sum(array): Sum of array values
average(array): Mean of array values
formatTimestamp(ms): Format Unix timestamp to readable string
findEarliestAndLatest(dataArrays): Find time range across multiple series
findCurrentBucketSize(start, end, maxBuckets): Calculate optimal aggregation interval
resample(data, bucketSize, aggregation): Resample time-series data
calculateTotal(data, bucketSize): Calculate total value over time

Example Script:

// Input1: Voltage (time-series)
// Input2: Current (time-series)
// Output: Power series

const powerData = inputData[0].map((voltagePoint, index) => {
  const currentPoint = inputData[1][index];
  if (!currentPoint) return null;

  const timestamp = voltagePoint[0];
  const power = voltagePoint[1] * currentPoint[1];

  return [timestamp, roundToDecimals(power, 2)];
}).filter(p => p !== null);

return powerData;

Use cases: Complex calculations (power from voltage/current), data transformations, custom aggregations, multi-signal formulas.

Dial

Single gauge visualization for real-time or aggregated telemetry values.

Configuration:

Option	Values	Description
Data Source	Last Value, Real Time	Last Value uses historical data with aggregation; Real Time uses latest telemetry
Signal	Single selection	Telemetry signal to display
Aggregation	Mean, Min, Max, Sum, Median	Applies to Last Value mode only
Interval	PT1M to P1Y	Aggregation bucket size (Last Value mode only)
Time Range	Last 1 hour to Last 30 days	Historical window (Last Value mode only)
JSON Options Editor	Custom config	Advanced gauge styling (see below)
Value Format	Template string	Display format with placeholders
Plotlines	See Plotlines section	Reference lines for thresholds

Value Format Placeholders:

{y}: Numeric value
{{unit}}: Signal unit
{{timestamp}}: Last update time

Example: {y} {{unit}} at {{timestamp}}

JSON Options Editor:

Control gauge appearance with JSON configuration:

{
  "min": 0,
  "max": 100,
  "stops": [
    [0.3, "#55BF3B"],
    [0.6, "#DDDF0D"],
    [0.9, "#DF5353"]
  ],
  "pane": {
    "startAngle": -90,
    "endAngle": 90
  },
  "yAxis": {
    "tickInterval": 10,
    "labels": {
      "enabled": true
    },
    "minorTickInterval": 5
  }
}

Common Gauge Styles:

Style	startAngle	endAngle	Description
Half-circle	-90	90	Bottom half-circle (default)
Full circle	0	360	Complete circle
Three-quarter	-135	135	Three-quarter circle (left-aligned)

Color Stops: Array of [position, color] where position is 0.0 to 1.0 (0-100% of range). Gauge color transitions between stops.

Use cases: Single KPI monitoring, real-time sensor displays, threshold visualization with color zones.

Dial Classic

Legacy gauge visualization. Provided for backward compatibility with older dashboards.

Configuration: Similar to Dial panel but uses older rendering engine.

Migration note: New dashboards should use the Dial panel instead. Dial Classic will be deprecated in future versions.

Dial List

Multiple gauges displayed in a list layout. Each gauge shows a different signal or asset.

Configuration:

Option	Values	Description
Data Source	Last Value, Real Time	Same as Dial panel
Signals	Multiple selection	Telemetry signals to display
Sort By	Ascending, Descending	Sort order by value
Group By	By Asset, By Signal	List organization method
Height Per Dial	Pixels	Vertical space for each gauge
Decimals	Integer	Decimal places for values
Value Format	Template string	Same as Dial panel
Plotlines	See Plotlines section	Reference lines (shared across all dials)

Grouping Behavior:

By Asset: Groups all signals from the same asset together
By Signal: Groups the same signal across multiple assets together

Use cases: Multi-sensor monitoring, fleet comparisons, signal overview dashboards.

LiquidFill

Animated liquid fill gauge for displaying percentage values with visual emphasis.

Configuration:

Category	Options
Signal Settings	Signal selection, decimal points, scale multiplier, base color
Wave Settings	Amplitude (wave height), wave length (frequency), background color
Outline Settings	Show outline, width, color, shadow blur
Label Settings	Show label, font size, color, inside color, position
Warning Levels	Threshold value, operator (`>`, `<`, `>=`, `<=`), color

Scale Multiplier: Converts raw values to percentages. For example, a signal with range 0-1 uses scale 100 to display as 0-100%.

Warning Levels: Change fill color when value crosses threshold. Multiple warning levels create color zones.

Animation: Gauge animates automatically with realistic liquid wave motion.

Use cases: Capacity monitoring (tank levels, battery charge), completion percentages, resource utilization displays.

Map

Interactive GPS map displaying asset locations with telemetry overlays.

Configuration:

Option	Description
Show Zoom Controls	Display +/- zoom buttons
Show Map Type Selector	Allow switching between road/satellite views
Select Nodes	Assets to display on map

Requirements: Assets must have Latitude and Longitude properties in their device twin (reported or desired).

Interaction: Click asset pin to view popup with current telemetry values and properties.

Use cases: Fleet tracking, environmental sensor networks, distributed infrastructure monitoring.

Property Panel

Display and edit device twin properties. Shows both reported (current) and desired (target) states.

Configuration:

Option	Description
Refresh Interval	Min 5 minutes (slower refresh due to device twin queries)
Select Properties	Choose which properties to display
Select Nodes	Assets to query (relative or absolute mode)

Display Columns: Property name, reported value, desired value, unit, last updated timestamp.

Writable Properties: Properties with "writable" permission in DTDL model show an edit icon. Click to modify desired value, which triggers a device twin update.

Use cases: Device configuration management, setpoint adjustment, property comparison across assets.

Signal Info

Simple panel displaying signal metadata and current value.

Configuration:

Signal: Single signal selection
Select Nodes: Asset to query

Display: Signal name, current value, unit, timestamp of last update.

Use cases: Quick signal reference, dashboard headers, minimal telemetry displays.

Telemetry Cards

Card-based layout for displaying multiple signals in a grid format.

Configuration:

Option	Values	Description
Data Source	Last Value, Real Time	Same as Dial panel
Signals	Multiple selection	Telemetry signals to display
Sort By	Ascending, Descending	Sort order by value
Group By	By Asset, By Signal	Card organization method
Aggregation	Mean, Min, Max, Sum, Median	Last Value mode only
Interval	PT1M to P1Y	Last Value mode only
Time Range	Last 1 hour to Last 30 days	Last Value mode only

Card Display: Each card shows signal name, current value, unit, small trend indicator (up/down arrow).

Grouping: Same behavior as Dial List (By Asset or By Signal).

Use cases: Dashboard overviews, multi-sensor summaries, comparison views with visual scanning.

Plotlines System

Plotlines are reference lines overlaid on charts and gauges to indicate thresholds, targets, or limits. Supported by Chart, Dynamic Chart, Dial, and Dial List panels.

Configuration:

Field	Description
Label	Text displayed next to line
Value Source	Static Value, Reported Property, Desired Property
Value	Numeric value (Static mode only)
Property	Property selection (Property modes only)
Select Nodes	Asset to query for property value (separate from panel data source)
Color	Line color (hex or named color)
Width	Line width in pixels
Line Style	Solid, Dashed, Dotted

Property-Based Plotlines: When using Reported Property or Desired Property as value source, the plotline dynamically updates as the property value changes. The Select Nodes field for the plotline can differ from the panel's main data source, allowing thresholds from one asset to be overlaid on data from another.

Multiple Plotlines: Add multiple plotlines to show warning/critical thresholds, normal operating ranges, or target values.

Example Use Case: Chart panel displays temperature from multiple sensors (relative mode). Plotline shows "Maximum Safe Temperature" from facility configuration (absolute mode, Desired Property from facility twin).

Data Source Patterns

Understanding relative vs absolute data sourcing is critical for building flexible dashboards.

Relative Mode (Context-Dependent)

Configuration: Select Nodes is empty

Behavior: Panel displays data for the currently selected tree node in the navigation context. When user navigates to a different asset or organization unit, the panel automatically updates.

Best for:

Dynamic dashboards assigned to templates (shows data for current asset)
Drill-down workflows (same dashboard, different data per selection)
Reusable dashboard definitions across multiple asset types

Example: A "Pump Details" dashboard with relative mode panels can be assigned to the Pump template. When viewing any pump asset, the dashboard shows that pump's data.

Absolute Mode (Fixed Assets)

Configuration: Select Nodes contains one or more specific asset IDs

Behavior: Panel always displays data from the specified assets, regardless of navigation context or current tree selection.

Best for:

Home dashboards (fixed overview of key assets)
Cross-asset comparisons (multiple specific assets in one panel)
Monitoring dashboards for specific infrastructure

Example: A home dashboard displays the 5 most critical pumps across the entire facility. All panels use absolute mode with those 5 asset IDs.

Hybrid Approach

Combine both modes in a single dashboard:

Relative panels for current asset details (adapt to navigation)
Absolute panels for overall facility metrics (always visible)

Example: Asset detail page shows relative panels for selected asset's telemetry, plus an absolute Active Alarms panel showing facility-wide critical alarms.

Best Practices

Performance:

Use longer aggregation intervals for longer time ranges
Limit the number of signals in Chart/Chart V2 panels (< 10 recommended)
Use Real Time data source only when sub-minute updates are needed
Set appropriate refresh intervals (longer = less load)

Usability:

Add Help Text to panels with complex configurations or calculated values
Use Visibility Conditions to simplify dashboards (hide irrelevant panels)
Group related panels with Text panels as section headers
Enable Show Path in charts when displaying signals from multiple assets

Maintainability:

Prefer relative mode for template-assigned dashboards
Use absolute mode for home dashboards and fixed monitoring views
Document Dynamic Chart calculations with comments in JavaScript
Use consistent naming conventions for panel titles

Visualization Selection:

Single value monitoring: Dial, Signal Info, or Telemetry Cards
Trends over time: Chart, Chart V2
Complex calculations: Dynamic Chart
Multi-sensor overview: Dial List, Telemetry Cards
Thresholds and zones: Dial with plotlines, LiquidFill
Geographic context: Map
Configuration management: Property Panel
Alerting: Active Alarms

Dashboards - Dashboard architecture and creation workflows
Charts - Chart configuration and best practices
Telemetry and Timeseries - Data aggregation and retention
Assets and Bindings - Asset model and device twin structure
Organization Templates - Assigning dashboards to templates

Common Panel Configuration​

Visibility Conditions​

Data Source Modes​

Panel Types Reference​

Text​

Active Alarms​

Chart​

Chart V2​

Dynamic Chart (EChart)​

Dial​

Dial Classic​

Dial List​

LiquidFill​

Map​

Property Panel​

Signal Info​

Telemetry Cards​

Plotlines System​

Data Source Patterns​

Relative Mode (Context-Dependent)​

Absolute Mode (Fixed Assets)​

Hybrid Approach​

Best Practices​

Related Documentation​

Common Panel Configuration

Visibility Conditions

Data Source Modes

Panel Types Reference

Text

Active Alarms

Chart

Chart V2

Dynamic Chart (EChart)

Dial

Dial Classic

Dial List

LiquidFill

Map

Property Panel

Signal Info

Telemetry Cards

Plotlines System

Data Source Patterns

Relative Mode (Context-Dependent)

Absolute Mode (Fixed Assets)

Hybrid Approach

Best Practices

Related Documentation