Charts in Windows Phone 7

Today morning I got a call from SQL Server Guru Pinal Dave and conversations was as below.







So, I started working on this. I decided to go ahead with hard coded data as below,

public class Bloggers
{
    public string Name { get; set; }
    public double Posts { get; set; }
}

And function returning dummy data is,

public static List<Bloggers> GetMembers()
{
    List<Bloggers> lstMembers = new List<Bloggers>
                                {
                                    new Bloggers
                                    {
                                         Name ="Pinal",
                                         Posts = 2000

                                    },
                                    new Bloggers
                                    {

                                         Name ="Debugmode",
                                         Posts = 400
                                    },

                                     new Bloggers
                                    {

                                         Name ="Koiarala",
                                         Posts = 1000

                                    },                                           
                                      new Bloggers
                                    {

                                         Name ="Mahesh",
                                         Posts = 1500

                                    },
 

                                };
    return lstMembers;
}

<Grid x:Name="LayoutRoot">
        <controls:Panorama Title="Bloggers">

            <!--Panorama item one-->
            <controls:PanoramaItem Header="Series Chart">
                <Grid>
                    <charting:Chart x:Name="seriesChart" Background="Black">
                        <charting:ColumnSeries Background="Black" />
                    </charting:Chart>
                </Grid>
            </controls:PanoramaItem>
            <!--Panorama item two-->
            <controls:PanoramaItem Header="Pie Chart">
                <Grid>
                    <charting:Chart x:Name="pieChart"></charting:Chart>
                </Grid>
            </controls:PanoramaItem>
            <!--Panorama item three-->
            <controls:PanoramaItem Header="Scatter Chart">
                <Grid>
                    <charting:Chart x:Name="scatterChart"></charting:Chart>
                </Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

To add chart control on XAML, I added namespace on XAML as below ,

xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

And on code behind as below,

using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;

Creating Column Series

ColumnSeries series = new ColumnSeries();          
            seriesChart.Series.Add(series);            
            series.SetBinding(ColumnSeries.ItemsSourceProperty, new Binding());
            series.ItemsSource =  GetMembers();
            series.DependentValuePath = "Posts";
            series.IndependentValuePath = "Name";

There is nothing to get confused in above code. It is creating a Column Series and adding to the chart in the first panorama item. Expected output would be as below ,


   
Creating Pie Series

PieSeries pieSeries = new PieSeries();            

pieChart.Series.Add(pieSeries);
pieSeries.SetBinding(PieSeries.ItemsSourceProperty, new Binding());
pieSeries.ItemsSource = Model.Factory.GetMembers();
pieSeries.DependentValuePath = "Posts";
pieSeries.IndependentValuePath = "Name";

Expected output is as below, 



Creating Scatter Series

ScatterSeries scatterSeries = new ScatterSeries();
scatterChart.Series.Add(scatterSeries);
scatterSeries.SetBinding(ScatterSeries.ItemsSourceProperty, new Binding());
scatterSeries.ItemsSource = Model.Factory.GetMembers();
scatterSeries.DependentValuePath = "Posts";
scatterSeries.IndependentValuePath = "Name";

Expected Output is as below,