Charts in Windows Phone 7

Today morning I got a call from SQL Server Guru  Pinal Dave and conversation 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 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">
                    <charting:Chart x:Name="seriesChart" Background="Black">
                        <charting:ColumnSeries Background="Black" />

            <!--Panorama item two-->
            <controls:PanoramaItem Header="Pie Chart">
                    <charting:Chart x:Name="pieChart"></charting:Chart>
            <!--Panorama item three-->
            <controls:PanoramaItem Header="Scatter Chart">
                    <charting:Chart x:Name="scatterChart"></charting:Chart>


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



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();
            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();
            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();
scatterSeries.SetBinding(ScatterSeries.ItemsSourceProperty, new Binding());
scatterSeries.ItemsSource = Model.Factory.GetMembers();
scatterSeries.DependentValuePath = "Posts";
scatterSeries.IndependentValuePath = "Name";

Expected Output is as below,





Published by

Dhananjay Kumar

Dhananjay Kumar is Developer Evangelist for Infragistics. He is a 8 times Microsoft MVP and well respected Developer Advocate in India.He is the author of 900+ Blog Posts, and can often be found speaking around India at conferences and hosting free workshops for programmers across the country. So far, he has hosted 60 free workshops on various topics like JavaScript, Angular, WCF, ASP.NET MVC, C#, Azure etc. Follow him on twitter @debug_mode for all the updates about his blog posts and workshops. You can send him email at debugmode [at] outlook [dot] com

10 thoughts on “Charts in Windows Phone 7”

  1. wonderfull, just wish you explained how to bind custom colors on pie chart slices.. I’ve tried every single code samples on the web, it’s not working…

    Trying to bind the color from my Category class..

    public Category
    public String Name { get; set; }
    public Color CatColor { get; set; }
    public Int32 ItemCount { get; set; }

    Any help would be much appreciated 🙂

    Thanks a lot

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s