Quick Start: Sparkline for WPF

This quick start section is intended to familiarize you with the Sparkline control. You begin by creating a WPF application in Visual Studio, adding Sparkline control, and populating it with sample data.

Complete the steps given below to see how Sparkline control appears at runtime.

Step 1: Setting up the application
Step 2: Adding sample data to populate the control at runtime
Step 3: Adding code to bind the control with sample data

Here is how a basic Sparkline control appears without any customization.

A basic sparkline chart

Step 1: Setting up the application

Create a WPF application in Visual Studio.
Drag and drop the C1Sparkline control to the MainWindow

Edit the XAML view to include relevant namespaces and set some basic properties of the control.

XAML	Copy Code
<Window x:Class="Sparkline_QuickStart.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <c1:C1Sparkline x:Name="sparkline" Height="250" Width="250"/> </Grid> </Window>

XAML

Copy Code

    <Window x:Class="Sparkline_QuickStart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <c1:C1Sparkline x:Name="sparkline" Height="250" Width="250"/>
    </Grid>
</Window>

Step 2: Adding sample data to populate the control at runtime

In this step, you add a class that returns an enumerable collection of numeric data points to be plotted on the Sparkline chart. This code example assumes that you add a class named SampleData.cs to return a collection of numeric values

In the Solution Explorer, right-click your project name and select Add | Class.
Specify the name of the class i.e. SampleData and click Add.

Add relevant code to create an enumerable collection of numeric data and return the same in a method.

Visual Basic
C#

Visual Basic

Public Class SampleData
    Public ReadOnly Property DefaultData() As List(Of Double)
        Get
            Dim data As New List(Of Double)() From { _
                1.0, _
                -2.0, _
                -1.0, _
                6.0, _
                4.0, _
                -4.0, _
                3.0, _
                8.0 _
            }
            Return data
        End Get
    End Property
End Class

class SampleData
{
    
    public List<double> DefaultData
    {
        get
        {
            List<double> data = new List<double>() { 1.0, -2.0, -1.0, 6.0, 4.0, -4.0, 3.0, 8.0 };
            return data;
        }
    }
 
}

Step 3: Adding code to bind the control with sample data

The SampleData.cs class added in the above step returns a collection of numeric values. In this step, you bind this collection to the Sparkline control so that data can be plotted at runtime. For this, you need to create an object of the SampleData class and assign it to the Data property of Sparkline control.

Switch to the MainPage.xaml.cs file and add the following import statements.
- Visual Basic
- C#
- Visual Basic
Imports C1.WPF.Sparkline
- C#
using C1.WPF.Sparkline;

Edit the interaction logic as given below to create an object of the SampleData class and assign it to the control's Data property

Visual Basic
C#

Visual Basic

Partial Public Class MainWindow
    Inherits Window
    Private sampleData As New SampleData()
    Public Sub New()
        InitializeComponent()
        sparkline.Data = sampleData.DefaultData
    End Sub
End Class

public partial class MainWindow : Window
{
    private SampleData sampleData = new SampleData();
    public MainWindow()
    {
        InitializeComponent();
        sparkline.Data = sampleData.DefaultData;
    }
}

Press F5 to run the application and observe how the Sparkline control appears at runtime.

What You Accomplish!

Congratulations! you successfully created a WPF application, added Sparkline control, and bound it to sample data to display a variation in the data points. Sparkline renders as a chart showing variation in data, without the basic chart-like elements like axis, legend, and title.