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,





10 responses to “Charts in Windows Phone 7”

  1. Hey dude….nice one …. like the new way of presenting the article …. keep it up

  2. Dhananjay Kumar

    Thanks Kashyapa 🙂

  3. I must express – I am glad to be on this page – super super!

  4. Innovation blogging! Hope this’ll become a trend.

  5. Actually formatting usually takes much of the time… 😦 (If design is taken seriously)

  6. Amazing… this made my day!.. 🙂

  7. hi

    Can i use this datavisualtion dll is it free

  8. 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 )

Facebook photo

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

Connecting to %s

Create a website or blog at