Charts in Windows Phone 7

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

image

 

image

 

image

 

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;
        }



image

 


<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 ,

image

 

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,

image

 

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,

image

 

image

 

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 comment

Create a website or blog at WordPress.com