Reader Level:
Articles

Charts in Windows Phone 7

By Dhananjay Kumar on Aug 29, 2011
Here you will see how to use Charts in Windows Phone 7.
  • 0
  • 0
  • 15422

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

Charts in Windows Phone 7

Charts in Windows Phone 7

Charts in Windows Phone 7

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


Charts in Windows Phone 7

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

Column Series Windows Phone
   
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,

Pie Series Windows Phone

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,

Pie Series Windows Phone

Pie Series Windows Phone

Article Extensions
Contents added by Raj Kumar Beniwal on Aug 29, 2011
Note -
xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
 
This assembly is located in silverlight toolkit bin folder.
Dhananjay Kumar

Dhananjay kumar is an independent trainer, a consultant and a programmer from India. He has mentored more than 1000 professionals and known for his unique way of teaching. He has been part of the multiple projects for bi... Read more

Personal Blog: http://debugmode.net/
COMMENT USING