# Quick Start

## Content



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.

![Displays the Sparkline control](https://cdn.mescius.io/document-site-files/images/9decca57-66c3-4dca-a1cc-04fdd3fb16b4/images/sparkline-charttype-line.png)

### 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.<br />
    
    ```xml
    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.
    
    ```xml
    <c1:C1Sparkline x:Name="sparkline" Height="250" Width="250"/>
    ```
    

### 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.<br />
    
    ```csharp
    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 <span data-popup-content="This property is available in \u003ca href=\u0022/componentone/api/wpf/online-sparkline/dotnet-api/C1.WPF.Sparkline/C1.WPF.Sparkline.C1Sparkline.Data.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-sparkline/dotnet-api/C1.WPF.Sparkline/C1.WPF.Sparkline.C1Sparkline.Data.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="Data" data-popup-theme="ui-tooltip-green qtip-green">Data</span> property of the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-sparkline/dotnet-api/C1.WPF.Sparkline/C1.WPF.Sparkline.C1Sparkline.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-sparkline/dotnet-api/C1.WPF.Sparkline/C1.WPF.Sparkline.C1Sparkline.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1Sparkline" data-popup-theme="ui-tooltip-green qtip-green">C1Sparkline</span> class as shown in the following code snippet.
    
    ```csharp
    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.