This quick start guides you through the steps of creating a simple Sparkline application by populating its data from an enumerable collection.

The following example uses the temperatures recorded for eight consecutive days in Canada to visualize the temperature fluctuations in the area and the following output appears after executing the application.

Set Up the Application

1. Create a new WPF Application and set the project framework from Additional Information window.
2. Install C1.WPF.Sparkline package using the NuGet Package Manager. The Sparkline control gets added in the Toolbox once the package is installed.
3. Edit the XAML view to include the following namespace.
   

   XAML	Copy Code
   xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

4. Drag and drop the Sparkline control from Toolbox onto your MainWindow. The Sparkline control gets added to the application. Add a few basic properties of Sparkline using the following code.

   XAML	Copy Code
   <c1:C1Sparkline x:Name="sparkline" Height="250" Width="250"/>

Back to Top

Bind to Data Source

1. In the Solution Explorer, right-click your project name and select Add | Class.
2. Specify the name of the class, say SampleData, and click Add.
3. Create an enumerable collection of numeric data points to be plotted on the Sparkline chart. Here, we have created a class named SampleData to be used as a data source with the enumerable collection.
   

   C#	Copy Code
   public 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; } } }

4. Switch to the MainWindow.xaml.cs file and bind Sparkline to the data source using Data property of the C1Sparkline class as shown in the following code snippet.

   C#	Copy Code
   public partial class MainWindow : Window { private SampleData sampleData = new SampleData(); public MainWindow() { InitializeComponent(); //Data binding using Data property sparkline.Data = sampleData.DefaultData; } }

5. Run the application and observe how the Sparkline control appears at runtime.

Back to Top