ComponentOne Sparkline for WPF
Sparkline for WPF Overview / Quick Start: Sparkline for WPF
In This Topic
    Quick Start: Sparkline for WPF
    In This Topic

    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.

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

    A basic sparkline chart

    Step 1: Setting up the application

    1. Create a WPF application in Visual Studio.
    2. Drag and drop the C1Sparkline control to the MainWindow
    3. 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" SparklineType="Column"/>
          </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

    1. In the Solution Explorer, right-click your project name and select Add | Class.
    2. Specify the name of the class i.e. SampleData and click Add.
    3. Add relevant code to create an enumerable collection of numeric data and return the same in a method.
      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.

    1. Switch to the MainPage.xaml.cs file and add the following import statements.
      Imports C1.WPF.Sparkline
      
      using C1.WPF.Sparkline;
      
    2. Edit the interaction logic as given below to create an object of the SampleData class and assign it to the control's Data property
      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;
          }
      }
      
    3. 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.