SparklineEdit

• Jun 07, 2019
• 6 minutes to read

Overview

The SparklineEdit is a visualization control that supports various operation modes.

The SparklineEdit control offers the following features.

• Multiple operation modes

  The SparklineEdit control supports the following operation modes.

  • Area
  • Line
  • Bar
  • Win-Loss

• Points highlighting

  You can highlight special points such as start point or max point. To learn more about Sparkline‘s special points, see SparklineEdit visual elements.

• Customizable colors

  Almost every element of the SparklineEdit control supports color customization. To learn more about available options, see SparklineEdit visual elements.

• Optimized for in-place editing

  SparklineEdit can be used standalone or as an in-place editor nested in a container control. The SparklineEditSettings class implements the in-place editing functionality. See In-place Editors to learn more.

Standalone SparklineEdit

This example demonstrates how to provide data for a standalone SparklineEdit control and adjust its main properties.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-sparkline-control-e4982.

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        x:Class="SparklineEdit.MainWindow"
        Title="MainWindow" Height="228" Width="525" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <System:String x:Key="Limit1">01/02/2000</System:String>
        <System:String x:Key="Limit2">01/07/2000</System:String>
    </Window.Resources>
    <Grid x:Name="grid">
        <dxe:SparklineEdit EditValue="{Binding SourceCollection}" 
                           PointValueMember="ValueColumn" PointArgumentMember="ArgumentColumn" >
            <dxe:SparklineEdit.PointArgumentRange>
                <dxe:Range Auto="False"
                    Limit1="{Binding Source={StaticResource ResourceKey=Limit1}}" 
                    Limit2="{Binding Source={StaticResource ResourceKey=Limit2}}" />
            </dxe:SparklineEdit.PointArgumentRange>
            <dxe:SparklineEdit.StyleSettings>
                <dxe:AreaSparklineStyleSettings 
                    LineWidth="3"
                    AreaOpacity="0.5"
                    ShowMarkers="True" 

                    MarkerSize="3"
                    MaxPointMarkerSize="10"
                    MinPointMarkerSize="9"
                    StartPointMarkerSize="8"
                    EndPointMarkerSize="7"
                    NegativePointMarkerSize="6"

                    HighlightMaxPoint="True" 
                    HighlightMinPoint="True" 
                    HighlightStartPoint="True"
                    HighlightEndPoint="True"
                    HighlightNegativePoints="True"

                    Brush="DarkBlue"
                    MaxPointBrush="#FFF5DA2A"
                    MinPointBrush="#FF2B0DEA"
                    StartPointBrush="#FF127A0D"
                    EndPointBrush="#FFF71616"
                    NegativePointBrush="#FF9C0404"
                    MarkerBrush="Black" />
            </dxe:SparklineEdit.StyleSettings>
        </dxe:SparklineEdit>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections
Imports System.Collections.ObjectModel
Imports System.Windows

Namespace SparklineEdit

    Partial Public Class MainWindow
        Inherits Window

        Private privateSourceCollection As IList
        Public Property SourceCollection() As IList
            Get
                Return privateSourceCollection
            End Get
            Set(ByVal value As IList)
                privateSourceCollection = value
            End Set
        End Property

        Public Sub New()
            InitializeComponent()

            grid.DataContext = Me

            GenerateData(7)
        End Sub

        Private Sub GenerateData(ByVal n As Integer)
            SourceCollection = New ObservableCollection(Of CustomElement)()

            Dim rnd As New Random()
            For i As Integer = 1 To n
                SourceCollection.Add(New CustomElement() With {.ArgumentColumn = New DateTime(2000, 1, i), .ValueColumn = rnd.Next(20), .FilteringColumn = 1})
            Next i


        End Sub
    End Class

    Public Class CustomElement
        Private privateArgumentColumn As Object
        Public Property ArgumentColumn() As Object
            Get
                Return privateArgumentColumn
            End Get
            Set(ByVal value As Object)
                privateArgumentColumn = value
            End Set
        End Property
        Private privateValueColumn As Integer
        Public Property ValueColumn() As Integer
            Get
                Return privateValueColumn
            End Get
            Set(ByVal value As Integer)
                privateValueColumn = value
            End Set
        End Property
        Private privateFilteringColumn As Integer
        Public Property FilteringColumn() As Integer
            Get
                Return privateFilteringColumn
            End Get
            Set(ByVal value As Integer)
                privateFilteringColumn = value
            End Set
        End Property
    End Class


End Namespace

MainWindow.xaml.cs

using System;
using System.Collections;
using System.Collections.ObjectModel;
using System.Windows;

namespace SparklineEdit {

    public partial class MainWindow : Window {

        public IList SourceCollection { get; set; }

        public MainWindow() {
            InitializeComponent();

            grid.DataContext = this;

            GenerateData(7);
        }

        private void GenerateData(int n) {
            SourceCollection = new ObservableCollection<CustomElement>();

            Random rnd = new Random();
            for (int i = 1; i <= n; i++) {
                SourceCollection.Add(new CustomElement() {
                    ArgumentColumn = new DateTime(2000, 1, i),
                    ValueColumn = rnd.Next(20),
                    FilteringColumn = 1
                });
            }


        }
    }

    public class CustomElement {
        public object ArgumentColumn { get; set; }
        public int ValueColumn { get; set; }
        public int FilteringColumn { get; set; }
    }


}

In-place SparklineEdit

This example demonstrates how to show sparklines in a grid column. Note that in this sample an Area sparkline is displayed. To change Area to another sparkline view, replace AreaSparklineStyleSettings with either BarSparklineStyleSettings, LineSparklineStyleSettings or WinLossSparklineStyleSettings.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-show-sparklines-in-a-grid-e4986.

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        x:Class="SparklineInGrid.MainWindow"
        Title="MainWindow" Height="562" Width="665" >
    <Grid>
        <dxg:GridControl x:Name="grid" ItemsSource="{Binding SalesData}" >
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Title" Header="Order" ReadOnly="True" Width="200"/>
                <dxg:GridColumn FieldName="SparklineData" Header="Sales" Width="200">
                    <dxg:GridColumn.EditSettings>
                        <dxe:SparklineEditSettings PointArgumentMember="ArgumentColumn" PointValueMember="ValueColumn">
                            <dxe:SparklineEditSettings.PointArgumentRange>
                                <dxe:Range Auto="False" Limit1="07/17/2013" Limit2="08/15/2013" />
                            </dxe:SparklineEditSettings.PointArgumentRange>
                            <dxe:SparklineEditSettings.StyleSettings>
                                <dxe:AreaSparklineStyleSettings Brush="BlueViolet"
                                    HighlightMaxPoint="True" HighlightMinPoint="True" 
                                    MaxPointBrush="Red" MinPointBrush="Blue" />
                            </dxe:SparklineEditSettings.StyleSettings>
                        </dxe:SparklineEditSettings>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
            </dxg:GridControl.Columns>
        </dxg:GridControl>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Threading
Imports System.Windows
Imports DevExpress.Xpf.Utils

Namespace SparklineInGrid

    Partial Public Class MainWindow
        Inherits Window

        Private privateSalesData As List(Of SalesDataRow)
        Public Property SalesData() As List(Of SalesDataRow)
            Get
                Return privateSalesData
            End Get
            Set(ByVal value As List(Of SalesDataRow))
                privateSalesData = value
            End Set
        End Property

        Public Sub New()
            InitializeComponent()

            grid.DataContext = Me

            SalesData = New List(Of SalesDataRow)()

            Dim rowsCount As Integer = 20

            For i As Integer = 0 To rowsCount - 1
                SalesData.Add(New SalesDataRow() With {.Title = String.Format("Index: {0}", i+1), .SparklineData = GenerateSparklineData()})
            Next i

        End Sub

        Private random As New Random()

        Private Function GenerateSparklineData() As IList
            Dim sparklineData As New ObservableCollection(Of SalesItem)()

            Dim dateTime As New DateTime(2013, 07, 17)

            For i As Integer = 0 To 29
                sparklineData.Add(New SalesItem() With {.ValueColumn = random.Next(-20, 20), .ArgumentColumn = dateTime.AddDays(i)})
            Next i

            Return sparklineData
        End Function

    End Class

    Public Class SalesDataRow
        Private privateTitle As Object
        Public Property Title() As Object
            Get
                Return privateTitle
            End Get
            Set(ByVal value As Object)
                privateTitle = value
            End Set
        End Property
        Private privateSparklineData As IList
        Public Property SparklineData() As IList
            Get
                Return privateSparklineData
            End Get
            Set(ByVal value As IList)
                privateSparklineData = value
            End Set
        End Property
    End Class

    Public Class SalesItem
        Private privateArgumentColumn As Object
        Public Property ArgumentColumn() As Object
            Get
                Return privateArgumentColumn
            End Get
            Set(ByVal value As Object)
                privateArgumentColumn = value
            End Set
        End Property
        Private privateValueColumn As Integer
        Public Property ValueColumn() As Integer
            Get
                Return privateValueColumn
            End Get
            Set(ByVal value As Integer)
                privateValueColumn = value
            End Set
        End Property
    End Class
End Namespace

MainWindow.xaml.cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading;
using System.Windows;
using DevExpress.Xpf.Utils;

namespace SparklineInGrid {

    public partial class MainWindow : Window {

        public List<SalesDataRow> SalesData { get; set; }

        public MainWindow() {
            InitializeComponent();

            grid.DataContext = this;

            SalesData = new List<SalesDataRow>();

            int rowsCount = 20;

            for (int i = 0; i < rowsCount; i++)
                SalesData.Add(new SalesDataRow() { Title = String.Format("Index: {0}", i+1), 
                    SparklineData = GenerateSparklineData() });

        }

        Random random = new Random();

        IList GenerateSparklineData() {
            ObservableCollection<SalesItem> sparklineData = new ObservableCollection<SalesItem>();

            DateTime dateTime = new DateTime(2013, 07, 17);

            for (int i=0; i < 30; i++)
                sparklineData.Add(new SalesItem() { ValueColumn = random.Next(-20, 20), ArgumentColumn = dateTime.AddDays(i) });

            return sparklineData;
        }

    }

    public class SalesDataRow {
        public object Title { get; set; }
        public IList SparklineData { get; set; }
    }

    public class SalesItem {
        public object ArgumentColumn { get; set; }
        public int ValueColumn { get; set; }
    }
}