Charting in Windows 8 Store Apps

One of the queries I received from a partner was to have charting implemented in their Windows 8 Application.  While by default there are no chart controls, there are a lot of third party controls such as Telerik, Component One, providing charting for Windows 8.

However, there is also the WINRTXamlToolkit, available in CodePlex.  It provides a bunch of useful controls that are not available, by default, in XAML for use in Windows 8 Store Applications.

http://winrtxamltoolkit.codeplex.com/releases/view/99868

Also, specifically for Chart, you can install it from the Package Manager Console. 

Visual Studio 2012 –> View –> Other Windows –> Packager Manager Console

It opens up the Package Manager Console.  In the prompt, type

Install-Package WinRTXamlToolkit and then

Install-Package WinRTXamlToolkit.Controls.DataVisualization

Once you install this, you can start referencing the Chart Controls in your XAML Page.

The complete sample can be downloaded from the above codeplex link which also includes a sample project with all the controls.

But, for our simple demonstration purposes, I created a Blank Windows Store Application. 

Visual Studio 2012 – File – New Project – Visual C# – Windows Store – Blank App (XAML)

I then opened the Package Manager Console and ran the above PowerShell commands.

Just to verify the assemblies are ordered open “References” to see the WinRTXamlToolkit and WinRTXamlToolkit.Controls.DataVisualization

Open up MainPage.Xaml and add the following lines to the Page Declarations in top

xmlns:datavis="using:WinRTXamlToolkit.Controls.DataVisualization"    xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:Series="using:WinRTXamlToolkit.Controls.DataVisualization.Charting
"

Then, within the Grid, add the following snippet

<charting:Chart
                x:Name="PieChart"
                Title="Pie Chart"
                Margin="70,0">
            <charting:Chart.Series>
                <Series:PieSeries
                        Title="Population"
                        ItemsSource="{Binding Items}"
                        IndependentValueBinding="{Binding Name}"
                        DependentValueBinding="{Binding Value}"
                        IsSelectionEnabled="True" />
            </charting:Chart.Series>
        </charting:Chart>

In the codebehind of MainPage.xaml, add the following

public class NameValueItem
       {
           public string Name { get; set; }
           public int Value { get; set; }
       }

We are simulating X,Y axis using a generic Text and Random Number.  Hence we need

private Random _random = new Random();

private void UpdateCharts()
       {
           List<NameValueItem> items = new List<NameValueItem>();
           items.Add(new NameValueItem { Name = "Test1", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test2", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test3", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test4", Value = _random.Next(10, 100) });
           items.Add(new NameValueItem { Name = "Test5", Value = _random.Next(10, 100) });

((PieSeries)this.PieChart.Series[0]).ItemsSource = items;

}

Modify the Constructor to include the UpdateCharts method

public MainPage()
        {
            this.InitializeComponent();
            UpdateCharts();
        }

That’s it, you are set to run the Project and when you run it, you will see the output below

image

There are Bar Charts, Bar Series Charts, Line Charts, Scatter Charts and many other types.  

I have extract the above sample code from the large sample repository at http://winrtxamltoolkit.codeplex.com/SourceControl/list/changesets

You can download this sample from http://sdrv.ms/13G8Si0

Cheers!!


 

Print | posted on Wednesday, March 6, 2013 4:31 PM

Comments on this post

# re: Charting in Windows 8 Store Apps

Requesting Gravatar...
Wonderful. I have a doubt:-

public class NameValueItem
{
public string Name { get; set; }
public int Value { get; set; }
}
May I know why need to initialize the int value.
Left by Panneer on Mar 10, 2013 9:48 AM

# re: Charting in Windows 8 Store Apps

Requesting Gravatar...
I'm currently working on a new Apps project for my studies. Thanks, this helped me a lot.
Left by Petra on Mar 11, 2013 4:42 PM

# re: Charting in Windows 8 Store Apps

Requesting Gravatar...
These Apps look really useful. Thanks for that tipp.
Left by Dana on May 20, 2013 11:25 PM

# re: Charting in Windows 8 Store Apps

Requesting Gravatar...
I need bar chart. There is an example with stacked columun?
It's very userful. Thanks thanks
Left by Gianfranco on Oct 05, 2013 9:43 PM

# re: Charting in Windows 8 Store Apps

Requesting Gravatar...
am getting an error in xaml page of :The name "chart" does not exists in the namespace.

can you please help me out.

thank you,
allex
Left by allex on Feb 18, 2014 9:28 AM

# re: Charting in Windows 8 Store Apps

Requesting Gravatar...
Hi, How do I add an event handler to StackedColumns chart? Specifically, I would like to trap which column user clicked and do a drill down on that column.
Left by Arasu on Mar 24, 2014 7:01 AM

# important

Requesting Gravatar...
It would be a great experience if you try. - Weathershield Reviews
Left by clemente on May 05, 2014 8:54 AM

Your comment:

 (will show your gravatar)