ComponentOne Sparkline for WinForms
In This Topic
    Quick Start
    In This Topic

    The Quick Start topic familiarizes you with adding Sparkline control to your Windows Form application and populate data in it.

    To create a simple WinForms application for Sparkline control, follow the mentioned steps and the below output appears after executing the application.

    This image depicts a simple winforms application with sparkline control.

    Add a C1Sparkline control

    1. Create a new Windows Forms application.
    2. Set the height and width of the form to 350
    3. Drag and drop the C1Sparkline control from the Toolbox onto your from.
    4. Set the height and width of the sparkline control to 250.

    Create a Data Source

    In this step, you add a class to your project 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.
      C#
      Copy Code
      class SampleData
          {
              public List<double> Sales
              {
                  get
                  {
                      List<double> data = new List<double>() { 1.0, -1.0, 2.0, -3.0, 4.0, 5.0, -5.0, 2.0 };
                      return data;
                  }
              }
          }
      
      VB
      Copy Code
      Class SampleData
          Public ReadOnly Property Sales As List(Of Double)
              Get
                  Dim data As List(Of Double) = New List(Of Double)() From {
                      1.0,
                      -1.0,
                      2.0,
                      -3.0,
                      4.0,
                      5.0,
                      -5.0,
                      2.0
                  }
                  Return data
              End Get
          End Property
      End Class
      

    View C1Sparkline control

    The SampleData.cs class added in the above step returns a collection of numeric values using the  ESTRONG>Sales Eproperty defined in the class. In this step, you bind this collection to the Sparkline control so that data can be plotted at runtime.

    1. In the Form1_Load event, create an instance of SampleData class and assign the value returned by the Sales property to the control's Data property.
      C#
      Copy Code
      SampleData sampleData = new SampleData();
      c1Sparkline1.Data = sampleData.Sales;
      
      VB
      Copy Code
      Dim sampleData As SampleData = New SampleData()
      c1Sparkline1.Data = sampleData.Sales
      

    To create a simple WinForms application in .NET5 Core for Sparkline control, follow the mentioned steps and the below output appears after executing the application.

     

    Please note that the WinForms .NET 5 Edition has only runtime assemblies. Due to the new design-time model in VS2019 Preview, which is not complete yet from the Microsoft side, we do not supply any special design-time features as of yet. However, some of the controls might show up at design-time and allow editing few properties in the property grid.

    Add a C1Sparkline control

    1. Create a new Windows Forms .NET Core application.
    2. Set the height and width of the form to 350
    3. In the Solution Explorer, right click Dependencies and choose Manage NuGet Packages and add C1.Win.Sparkline .NET 5 packages.
    4. Switch to code view and add the following code in the code behind of Form.cs file
          //Initialized the C1Sparkline control
    
               C1Sparkline sparkline= new C1Sparkline();
    
          //Adding the CSparkline control to the form
    
                this.Controls.Add(sparkline);
    
     

    Create a Data Source

    In this step, you add a class to your project 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.
      class SampleData
          {
              public List<double> Sales
              {
                  get
                  {
                      List<double> data = new List<double>() { 1.0, -1.0, 2.0, -3.0, 4.0, 5.0, -5.0, 2.0 };
                      return data;
                  }
              }
          }
      

    View C1Sparkline control

    The SampleData.cs class added in the above step returns a collection of numeric values using the <STRONG>Sales property defined in the class. In this step, you bind this collection to the Sparkline control so that data can be plotted at runtime.

    1. In the Form1_Load event, create an instance of SampleData class and assign the value returned by the Sales property to the control's Data property.
                                              
      //Initialized the SampleData class      
      SampleData sampleData = new SampleData();
      //Assigned the "Sales" list available in the SampleData class //to the "Data" property of the C1Sparkline control     
      sparkline.Data = sampleData.Sales;
      
        Click Build | Build Solution to build the project. Run the application and observe how the C1Sparkline control appears at runtime.