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