Trend Indicators

• Apr 26, 2024
• 6 minutes to read

The Web Dashboard allows you to display predefined trend indicators in Chart dashboard items. You can also create and register custom indicators.

Trend indicators are statistical tools used to analyze data and identify patterns or relationships between variables.

The following indicator types are available:

Trend Line

Displays the general direction of associated points. It is often used to identify existing data trends and can help forecast future trends.

Regression Line

Visualizes data using a mathematical formula that minimizes the distance between the line itself and associated data points. It is used to model the relationship between two variables and can be used to make predictions about one variable based on the value of another.

Custom Indicator

Allows you to implement your own custom indicator type.

Create a Trend Indicator in the UI

Click Trend Indicators in the Options dialog to open the Trend Indicators editor.

Click “+” to add a new trend indicator. The new indicator is generated with the default settings and automatically displayed in a chart dashboard item:

You can change the following indicator settings:

Name

The name of the trend indicator within the indicators collection.

Type

The indicator type: Trend Line, Regression Line, or a Custom Type.

Value

The measure data item that is used to calculate the trend indicator.

Value Level

The value that specifies which series point value should be used to calculate the indicator.

Display In Legend

Specifies whether to display the trend indicator in the legend.

Legend Text

The text that identifies the trend indicator within the legend.

Dash Style

The dash style used to paint the line.

Thickness

The thickness of the indicator line.

Color

The color for the trend indicator.

Visible

Specifies whether to display the trend indicator.

In the editor, select an indicator and click Edit or Delete to edit or delete the selected item.

Create a Trend Indicator in Code

You can create a trend indicator in code as follows:

1. Create a ChartRegressionLine or ChartTrendLine object and specify its settings.

   This property is required to display the indicator in the Chart dashboard item when you launch the application:

   Value

   Specifies the measure data item that is used to calculate the trend indicator.

   If you do not specify the following properties, their default values are used:

   Name

   Specifies the name of the trend indicator within the indicators collection.

   ValueLevel

   Gets or sets the value that specifies which series point value should be used to calculate the indicator.

   ShowInLegend

   Specifies whether to display the trend indicator in the legend.

   LegendText

   Specifies the text that identifies the trend indicator within the legend.

   Thickness

   Specifies the thickness of the indicator line.

   Color

   Specifies the trend indicator’s color.

   DashStyle

   Specifies the dash style used to paint the line.

   Visible

   Specifies whether to display the trend indicator.

2. Add the created object to the ChartDashboardItem.Indicators collection to display the configured indicator in the UI.

The following example shows how to create a trend line at runtime:

C#

using DevExpress.DashboardCommon;
using System.Drawing;
// ...
public partial class CustomIndicatorDashboard : DevExpress.DashboardCommon.Dashboard {
    public CustomIndicatorDashboard() {
        InitializeComponent();
        ChartDashboardItem chartItem = Items.First(x => x.ComponentName == "chartDashboardItem1") as ChartDashboardItem;
        ChartTrendLine trendLine = new ChartTrendLine();
        SimpleSeries simpleSeries = chartItem.Panes[0].Series[0] as SimpleSeries;
        if (simpleSeries != null) {
            trendLine.Value = simpleSeries.Value.UniqueId;
        }
        trendLine.Name = "SalesTrend";
        trendLine.ValueLevel = DevExpress.XtraCharts.ValueLevel.Value;
        trendLine.Color = Color.Orange;
        trendLine.LegendText = "Sales Trend";

        chartItem.Indicators.Add(trendLine);
    }
}

VB.NET

Imports DevExpress.DashboardCommon
Imports System.Drawing
' ...
Partial Public Class CustomIndicatorDashboard
    Inherits DevExpress.DashboardCommon.Dashboard

    Public Sub New()
        InitializeComponent()
        Dim chartItem As ChartDashboardItem = TryCast(Items.First(Function(x) x.ComponentName = "chartDashboardItem1"), ChartDashboardItem)
        Dim trendLine As New ChartTrendLine()
        Dim simpleSeries As SimpleSeries = TryCast(chartItem.Panes(0).Series(0), SimpleSeries)
        If simpleSeries IsNot Nothing Then
            trendLine.Value = simpleSeries.Value.UniqueId
        End If
        trendLine.Name = "SalesTrend"
        trendLine.ValueLevel = DevExpress.XtraCharts.ValueLevel.Value
        trendLine.Color = Color.Orange
        trendLine.LegendText = "Sales Trend"

        chartItem.Indicators.Add(trendLine)
    End Sub
End Class

Create a Custom Trend Indicator

Follow the instruction below to create a custom “Moving Average” indicator for a Chart dashboard item:

View Example

Create a Custom Indicator Type

Create a ChartCustomIndicator descendant (the MovingIndicator class in this example). MovingIndicator accepts a collection of data points, evaluates the values, and returns the resulting points. These points are used to draw the indicator.

MovingIndicator.cs

using DevExpress.DashboardCommon;
using DevExpress.DashboardCommon.ViewerData;
using System.Collections.Generic;

namespace asp_net_core_dashboard_control_trendline_indicators.Data {
    public class MovingIndicator : ChartCustomIndicator {
        protected override Dictionary<AxisPoint, object> Calculate(Dictionary<AxisPoint, decimal?> values) {
            var items = new Dictionary<AxisPoint, object>(values.Count);

            var sum = decimal.Zero;
            var count = 0;
            foreach(KeyValuePair<AxisPoint, decimal?> point in values) {
                if(count == 0) {
                    items.Add(point.Key, null);
                } else {
                    items.Add(point.Key, sum / count);
                }
                sum += point.Value ?? 0;
                count++;
            }

            return items;
        }
    }
}

MovingIndicator.vb

Imports System
Imports System.Collections.Generic
Imports DevExpress.DashboardCommon.ViewerData
Imports DevExpress.DashboardCommon
' ...
Public Class MovingIndicator
    Inherits ChartCustomIndicator

    Protected Overrides Function Calculate(ByVal values As Dictionary(Of AxisPoint, Decimal?)) As Dictionary(Of AxisPoint, Object)
        Dim items = New Dictionary(Of AxisPoint, Object)(values.Count)
        Dim sum = Decimal.Zero
        Dim count = 0

        For Each point As KeyValuePair(Of AxisPoint, Decimal?) In values

            If count = 0 Then
                items.Add(point.Key, Nothing)
            Else
                items.Add(point.Key, sum / count)
            End If

            sum += If(point.Value, 0)
            count += 1
        Next

        Return items
    End Function
End Class

Register the Custom Indicator Type

Register the MovingIndicator type in IndicatorFactory to make this class available as an indicator type.

Call the Register method in your application before you save and load a dashboard to serialize and deserialize the indicator within the dashboard XML.

ASP.NET Core

using DevExpress.DashboardWeb;
using TrendIndicators.Data;
// ...
    public static class DashboardUtils {
        public static DashboardConfigurator CreateDashboardConfigurator(IConfiguration configuration, IFileProvider fileProvider) {
            DashboardConfigurator configurator = new DashboardConfigurator();
            // ...
            IndicatorFactory.Register<MovingIndicator>("Moving average");
            return configurator;
        }
    }
}

Web Forms (CS)

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
// ...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) {
    // ...
    IndicatorFactory.Register<MovingIndicator>("Moving average");
}

Web Forms (VB)

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
` ...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
` ...

IndicatorFactory.Register(Of MovingIndicator)("Moving average")
End Sub

Register the Extension

Register ChartIndicatorsExtension before the control is rendered to add the MovingIndicator type to the Trend Indicators editor.

function onBeforeRender(dashboardControl) {
    // ...
    dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.ChartIndicatorsExtension(dashboardControl, {
        customIndicatorTypes: [ {
                type: 'MovingIndicator',
                displayName: 'Moving Average'
            }
        ]
    }));
}

Configure and Display the Indicator

Open the Trend Indicators editor and add a new trend indicator. A new Moving Average type is available in the UI: