Getting started with Metro Elements: Chart controls

Not long ago we released the beta version of Metro Elements – a suite of controls for WinRT. Currently we provide a set of powerful charting controls and a date-time picker with flexible formatting. We also have many more controls currently under development which will be released throughout the next couple of months. In this blog post I’m going to walk you though getting started with using Metro Elements. In particular, we will look at adding a couple of charts to an application and populate them with data. If you would like to follow along but don’t have the beta yet, you can download it for free from here.

Step 1: Start a new project

After you’ve installed the Metro Elements beta, run up Visual Studio 2012 and create a new blank windows store project. Next, in the Solution Explorer, right click References to add a new reference. This will popup the Reference Manager dialog. In the left pane of the dialog, navigate to Windows -> Extensions. This will bring up a list of extension SDKs. Check Metro Elements and then click OK.

Add Metro Elements SDK

Step 2 : Add the xml namespace

Next we need to add the xml namespace definition to MainPage.xaml which is where we will be placing the charts. Metro Elements has 2 namespaces. All the charting controls can be found in Mindscape.MetroElements.Charting, and everything else is in Mindscape.MetroElements. Open MainPage.xaml and add the xml namespace like this:

xmlns:ch="using:Mindscape.MetroElements.Charting"

Step 3: Adding a bar chart

Now we add a Chart control to MainPage.xaml and set it up to display a bar series. As you can see below, this is incredibly simple!

<ch:Chart Title="Bar Chart">
  <ch:BarSeries ItemsSource="{Binding Data1}" />
</ch:Chart>

Here you can see the ItemsSource of the bar series is binding to a property on the DataContext of the page. To keep things simple for this tutorial, I’ve set the DataContext to be the page itself. (Normally you would create a new model class and set the DataContext to be an instance of that). Below is the code you can add to MainPage.xaml.cs for populating the chart data:

public sealed partial class MainPage : Page
{
  private readonly Random _random = new Random();
 
  public MainPage()
  {
    this.InitializeComponent();
 
    string[] games = { "Chess", "Checkers", "Battleship", "Monopoly", "Poker", "Lawn Bowls" };
    Data1 = new List<object>();
    foreach (string s in games)
    {
      Data1.Add(new StringDouble(s, _random.NextDouble() * 30));
    }
 
    DataContext = this;
  }
 
  public IList Data1 { get; set; }
 
  protected override void OnNavigatedTo(NavigationEventArgs e)
  {
  }
}

Each object added to the items source will represent a rendered data point on the chart. For example, if you fill the chart with .NET Point objects, the chart will automatically plot the X and Y values along the appropriate axes. Metro Elements comes with various classes that you can use as data points which map strings or date times on one axis to numeric values on the other axis. You can also provide your own custom objects and tell the chart which property to plot along each axis. As you can see in the code above, I am populating the items source with StringDouble objects. Each StringDouble will be rendered as a bar on the chart and displays the string value on the X axis. Here is an example of what this produces.

Bar Chart

Step 4: Adding more bar series to the same chart

In 3 easy steps you have already set up a bar chart to display data in an application. Now I want to point out how you can add more data series to a single chart control. Metro Elements currently provides 16 different types of series that can be displayed by the Chart control. This includes bar series, line series, area series, spline series, stock series, various stacked series and more. You can plot multiple series on the same pair of X/Y axes simply by adding more data series between the Chart tags. For this tutorial, lets add another 2 bar series to the chart. Each series has its own items source, so you’ll need to add another 2 collection properties to the page for binding to. Below is the xaml code for displaying multiple bar series. Here you can see I’ve also set the SeriesBrush properties to color each bar series differently, and I’ve set the Title properties to display a name for each series in the legend.

<ch:Chart Title="Victory Chart">
  <ch:BarSeries ItemsSource="{Binding Data1}" SeriesBrush="#EAC320" Title="Matt" />
  <ch:BarSeries ItemsSource="{Binding Data2}" SeriesBrush="#ED3A8E" Title="Steve" />
  <ch:BarSeries ItemsSource="{Binding Data3}" SeriesBrush="#27A8E1" Title="Jeff" />
</ch:Chart>

Multiple bar series

Step 5: Adding a pie chart

So far I’ve showed you how to get started with adding cartesian (X/Y) charts to your application. To finish off this tutorial, let’s look at adding a pie chart. Since pie charts aren’t rendered on an X/Y plane, you plot pie charts using the PieChart control. Just like with the Chart control, you add series between the start and end tags of the control. The only series that the PieChart control accepts is the PieSeries, but by simply setting the DoughnutScale property, you can get a doughnut chart. Here is some example code:

<ch:PieChart Title="Percentage Played">
  <ch:PieSeries ItemsSource="{Binding Data4}" DoughnutScale="0.5">
    <ch:PieSeries.Brushes>
      <SolidColorBrush Color="#D9DE1F" />
      <SolidColorBrush Color="#FFCC00" />
      <SolidColorBrush Color="#A41368" />
      <SolidColorBrush Color="#C2609A" />
      <SolidColorBrush Color="#3BB2E4" />
      <SolidColorBrush Color="#9ED9F0" />
    </ch:PieSeries.Brushes>
  </ch:PieSeries>
</ch:PieChart>

Unlike the X/Y charts, each data point in a single pie series can have it’s own color and a spot in the legend. Rather than providing a single series-brush, you can provide a collection of brushes as seen above which will sequentially be applied to the data points. The best way to add data to a pie series is by using instances of the StringDouble class that I described earlier. The double value is automatically used to determine the size of each data point, and the string value appears in the legend. Of course the pie chart also supports other types of data such as your own custom model objects and you can specify the bindings that get the data and legend titles.

Pie Chart

And that’s everything you need to know to quickly get started with using our metro chart controls. When you installed Metro Elements, a shortcut to a Visual Studio samples solution would have been added to your desktop. The QuickStart project covers the topics that I’ve mentioned today, so it is a good source for further code examples. The chart controls have many features that let you customize the look and feel of the charts which I’ll talk about later.

If you have any queries about how to use any of the controls in Metro Elements, ask away in the forum. If you have any feature or control requests, we’d love to here them in the Think Tank. Also, if you’d like me to write about a particular topic related to Metro Elements, leave a comment on this blog post.

10 Responses to “Getting started with Metro Elements: Chart controls”

  • Hi!

    First of all, congrats guys, this is really easy to use!

    Although I’d like to see some posts about the AreaSeries and especially about how to style these charts.
    Sadly nor VisualStudio neither Blend can display the Beta controls on my PC (because of an OutOfMemoryException). And it makes it hard to customize them. :(

    thanks,
    Tenshiko

  • Hello Tenshiko

    Thanks for your feedback. We will definitely be resolving the design time issues during the beta period. I’ll make sure my next tutorial blog is about area series and styling customizations.

    Jason

  • Hello,
    actually there is no type called “StringDouble” ?

  • Hello Simon

    I have double checked and can see the StringDouble class does exist. It is in the Mindscape.MetroElements.Charting namespace.

  • Hi Jason,

    First of all thanks, it was too ease to work on with it.

    Is there any way so that the item names can be displayed corresponding to pie chart slices rather that on right side of the chart?

    Looking forward for your help.

    Thanks & Regards,

  • I mean to say, something like this http://www.bbc.co.uk/bitesize/ks3/maths/images/pie_chart1.gif

  • Hello Shashank

    Yes, this can be done: On your PieSeries, set the LabelBinding property to let the series know what you want to be displayed in the label. If you are using StringDouble as your data items, you would use LabelBinding=”{Binding String}”. Or if you are using your own data point objects, you can set the binding to the appropriate property on your objects that holds the label.

    Next set the PieSeries.ShowDataLabels property to true to actually allow the labels to be displayed. You can customize the positions of the labels in two ways: Either set ShowDataLabelLines to true to display the labels outside the pie chart with lines connecting the labels to the appropriate slice, or set DataLabelOffsetFactor to position the label within the pie slices. 0.5 for example will place the labels in the center of each slice.

    Finally, make sure to set PieChart.LegendPosition to None to hide the legend.

    Optionally, you can set the PieSeries.DataLabelStyle property to customize the look of the labels.

  • Thanks Jason, it worked

  • Hi,Jason

    When the user click or hover on the any slice of the pie,it will trigger one event to activate corresponding method.
    For example,there is a pie about animal.each slice of the pie display one kind of animal,when i click the monkey,there is another listview to display to illustrate the number of monkeys with different color,how much monkey with red ,black,green.etc.

    Thanks a lot.

  • Hello Martin

    Listen to the SelectedItemsChanged event on the PieSeries. In the event handler, get the PieSeries that raised the event and look in the SelectedItems collection property to see which object is selected. If you need further help with this, please post another question here: http://www.mindscapehq.com/forums/forum/30

    Regards

    Jason Fauchelle

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top