Geeks With Blogs

News




ThreadAbortException my experiments with //Web

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


 

Posted on Wednesday, March 6, 2013 4:31 PM | Back to top


Comments on this post: Charting in Windows 8 Store Apps

# 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

# re: Charting in Windows 8 Store Apps
Requesting Gravatar...
Thanks your for the tutorial. a
Left by Heshmi on Dec 01, 2014 4:15 PM

# re: Charting in Windows 8 Store Apps
Requesting Gravatar...
hoe can draw the bar chart
Left by jagan on Dec 28, 2014 7:33 PM

Your comment:
 (will show your gravatar)


Copyright © Harish Ranganathan | Powered by: GeeksWithBlogs.net | Join free