SIGN UP MEMBER LOGIN:    
ARTICLE

Charts in Windows Phone 7

Posted by Dhananjay Kumar Articles | Windows Phone in C# 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.
share this article :
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
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Team Foundation Server Hosting
Become a Sponsor