Create a basic chart using SparrowChart Control

  1. WPF
  2. Silverlight
  3. WindowsPhone
  4. WinRT

WPF

  • Obtain the SparrowChart for WPF from nuget => Sparrow.Chart.Wpf
  • Import the following namespace in the XAML
 xmlns:sparrow="http://sparrowtoolkit.codeplex.com/wpf"
 
  • Create the sparrow chart in XAML
  • Method 1
<sparrow:SparrowChart>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries>             
                <sparrow:LineSeries.Points>
                        <sparrow:DoublePoint Data="0" Value="1"/>
                        <sparrow:DoublePoint Data="1" Value="2"/>
                        <sparrow:DoublePoint Data="2" Value="3"/>
                        <sparrow:DoublePoint Data="3" Value="4"/> 
                 </sparrow:LineSeries.Points>
            </sparrow:LineSeries>
</sparrow:SparrowChart>
  • Method 2
Points="x,y,x,y......etc"
<sparrow:SparrowChart>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries Points="0,1,1,2,2,3,3,4"/>
</sparrow:SparrowChart>
  • Method 3
MVVM Based
//Create a model
public class Model
    {
        public double X { get; set; }
        public double Y { get; set; }
       
        public Model(double x,double y)
        {
            X = x;
            Y = y;           
        }      
    }

// Create a ViewModel
public class ViewModel
    {
        public ObservableCollection<Model> Collection { get; set; }
        public ViewModel()
        {
            Collection = new ObservableCollection<Model>();
            GenerateDatas();
        }
        private void GenerateDatas()
        {
            this.Collection.Add(new Model(0, 1));
            this.Collection.Add(new Model(1, 2));
            this.Collection.Add(new Model(2, 3));
            this.Collection.Add(new Model(3, 4));
        }
    }

//Use the viewmodel in the Sparrow Chart
<sparrow:SparrowChart>
       <sparrow:SparrowChart.DataContext> 
              <local:ViewModel/>
      </sparrow:SparrowChart.DataContext>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries PointsSource="{Binding Collection}" XPath="X" YPath="Y"/>
</sparrow:SparrowChart>

Silverlight

 xmlns:sparrow="http://sparrowtoolkit.codeplex.com/silverlight"
 
  • Create the sparrow chart in XAML
  • Method 1
<sparrow:SparrowChart>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries>             
                <sparrow:LineSeries.Points>
                        <sparrow:DoublePoint Data="0" Value="1"/>
                        <sparrow:DoublePoint Data="1" Value="2"/>
                        <sparrow:DoublePoint Data="2" Value="3"/>
                        <sparrow:DoublePoint Data="3" Value="4"/> 
                 </sparrow:LineSeries.Points>
            </sparrow:LineSeries>
</sparrow:SparrowChart>
  • Method 2
MVVM Based
//Create a model
public class Model
    {
        public double X { get; set; }
        public double Y { get; set; }
       
        public Model(double x,double y)
        {
            X = x;
            Y = y;           
        }      
    }

// Create a ViewModel
public class ViewModel
    {
        public ObservableCollection<Model> Collection { get; set; }
        public ViewModel()
        {
            Collection = new ObservableCollection<Model>();
            GenerateDatas();
        }
        private void GenerateDatas()
        {
            this.Collection.Add(new Model(0, 1));
            this.Collection.Add(new Model(1, 2));
            this.Collection.Add(new Model(2, 3));
            this.Collection.Add(new Model(3, 4));
        }
    }

//Use the viewmodel in the Sparrow Chart
<sparrow:SparrowChart>
       <sparrow:SparrowChart.DataContext> 
              <local:ViewModel/>
      </sparrow:SparrowChart.DataContext>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries PointsSource="{Binding Collection}" XPath="X" YPath="Y"/>
</sparrow:SparrowChart>

Windows Phone 7.1 and 8

  • Obtain the SparrowChart for Windows Phone from nuget =>
WP7 Sparrow.Chart.WP7
WP8 Sparrow.Chart.WP8
  • Import the following namespace in the XAML
For WP7
xmlns:sparrow="clr-namespace:Sparrow.Chart;assembly=Sparrow.Chart.WP7.45"
 

For WP8
xmlns:sparrow="clr-namespace:Sparrow.Chart;assembly=Sparrow.Chart.WP8.45"
 
  • Create the sparrow chart in XAML
  • Method 1
<sparrow:SparrowChart>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries>             
                <sparrow:LineSeries.Points>
                        <sparrow:DoublePoint Data="0" Value="1"/>
                        <sparrow:DoublePoint Data="1" Value="2"/>
                        <sparrow:DoublePoint Data="2" Value="3"/>
                        <sparrow:DoublePoint Data="3" Value="4"/> 
                 </sparrow:LineSeries.Points>
            </sparrow:LineSeries>
</sparrow:SparrowChart>
  • Method 2
MVVM Based
//Create a model
public class Model
    {
        public double X { get; set; }
        public double Y { get; set; }
       
        public Model(double x,double y)
        {
            X = x;
            Y = y;           
        }      
    }

// Create a ViewModel
public class ViewModel
    {
        public ObservableCollection<Model> Collection { get; set; }
        public ViewModel()
        {
            Collection = new ObservableCollection<Model>();
            GenerateDatas();
        }
        private void GenerateDatas()
        {
            this.Collection.Add(new Model(0, 1));
            this.Collection.Add(new Model(1, 2));
            this.Collection.Add(new Model(2, 3));
            this.Collection.Add(new Model(3, 4));
        }
    }

//Use the viewmodel in the Sparrow Chart
<sparrow:SparrowChart>
       <sparrow:SparrowChart.DataContext> 
              <local:ViewModel/>
      </sparrow:SparrowChart.DataContext>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries PointsSource="{Binding Collection}" XPath="X" YPath="Y"/>
</sparrow:SparrowChart>

WinRT

  • Obtain the SparrowChart for WinRT from nuget => Sparrow.Chart.WinRT
  • Import the following namespace in the XAML
 xmlns:sparrow="using:Sparrow.Chart"
 
  • Create the sparrow chart in XAML
  • Method 1
<sparrow:SparrowChart>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries>             
                <sparrow:LineSeries.Points>
                        <sparrow:DoublePoint Data="0" Value="1"/>
                        <sparrow:DoublePoint Data="1" Value="2"/>
                        <sparrow:DoublePoint Data="2" Value="3"/>
                        <sparrow:DoublePoint Data="3" Value="4"/> 
                 </sparrow:LineSeries.Points>
            </sparrow:LineSeries>
</sparrow:SparrowChart>
  • Method 2
MVVM Based
//Create a model
public class Model
    {
        public double X { get; set; }
        public double Y { get; set; }
       
        public Model(double x,double y)
        {
            X = x;
            Y = y;           
        }      
    }

// Create a ViewModel
public class ViewModel
    {
        public ObservableCollection<Model> Collection { get; set; }
        public ViewModel()
        {
            Collection = new ObservableCollection<Model>();
            GenerateDatas();
        }
        private void GenerateDatas()
        {
            this.Collection.Add(new Model(0, 1));
            this.Collection.Add(new Model(1, 2));
            this.Collection.Add(new Model(2, 3));
            this.Collection.Add(new Model(3, 4));
        }
    }

//Use the viewmodel in the Sparrow Chart
<sparrow:SparrowChart>
       <sparrow:SparrowChart.DataContext> 
              <local:ViewModel/>
      </sparrow:SparrowChart.DataContext>
            <sparrow:SparrowChart.XAxis>
                    <sparrow:LinearXAxis/>
            </sparrow:SparrowChart.XAxis>
            <sparrow:SparrowChart.YAxis>
                    <sparrow:LinearYAxis/>
            </sparrow:SparrowChart.YAxis>
           <sparrow:LineSeries PointsSource="{Binding Collection}" XPath="X" YPath="Y"/>
</sparrow:SparrowChart>

Last edited Mar 17, 2014 at 1:39 PM by Foske76, version 4

Comments

The_Fox Jul 21, 2013 at 7:46 AM 
In the wpf MVVM example in the xaml source there are parantheses missing in this line:

<sparrow:LineSeries PointsSource={Binding Collection} XPath="X" YPath="Y"/>

Should be this:
<sparrow:LineSeries PointsSource="{Binding Collection}" XPath="X" YPath="Y"/>

Great Toolkit. Thanks.

TyburnConsultancy Jun 6, 2013 at 6:42 PM 
Very nice