ARTICLE

Charts in Windows Phone 7

Posted by Dhananjay Kumar Articles | Windows Phone 8 August 29, 2011
Here you will see how to use Charts in Windows Phone 7.
Reader Level:

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

Login to add your contents and source code to this article
Article Extensions
Contents added by Raj Kumar 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.
post comment
     

Hi, Im new to this, but can u explain where the code for the different charts go? ColumnSeries series = new ColumnSeries(); seriesChart.Series.Add(series); series.SetBinding(ColumnSeries.ItemsSourceProperty, new Binding()); series.ItemsSource = GetMembers(); series.DependentValuePath = "Posts"; series.IndependentValuePath = "Name"; etc etc

Posted by D Lng Jan 06, 2012

glad it was helpful

Posted by Dhananjay Kumar Oct 16, 2011

Thanks Mr Dhananjay I Know how i can't do it before ! Because i don't add references System.Windows.Controls and it's not work

Posted by Nguyen Pham Sep 22, 2011

Yesterday i try to coding as your post, but i don't know why it's not work. Can you give me source code of this post ??? Please ! my email is pham.nguyen@hotmail.com Hope your help ! Thanks !

Posted by Nguyen Pham Sep 22, 2011

Creative work.

Posted by Mahesh Chand Aug 29, 2011
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts