WinRT XAML (Part 5) Chart

Script 5: Chart in Studio for WinRT XAML

Visualize your data with the most advanced WinRT charting control. ComponentOne Chart™ for WinRT XAML supports all popular 2D chart types, flexible data binding, run-time interaction, rich styling elements and many more advanced features. Take your Windows Store apps to the next level today!

30+ Chart Types

Get the exact chart representation you need for your Windows Store application by choosing from over 30 popular 2D chart types. Available chart types include line, scatter, bar, column, pie, area, stacked and many more.

Download Now!

See the full list of supported chart types:

Flexible Data Binding

Bind the control to a collection of business objects or anything that implements IEnumerable. The entire chart structure including data series, axes, and plot areas can be declaratively bound to in XAML, enabling popular design patterns such as MVVM.

Data Point Selection

For ICollectionView data sources, the C1Chart control supports data-level item selection. Specify how the user can select plot elements, the appearance of selected elements, as well as the appearance of an attached label.

Data Labels and Markers

Display text and other UI elements over the chart as labels and moveable markers. Markers can be smartly bound or positioned on specific data points or plot coordinates so the hard part is taken care of for you.

Zoom and Pan Actions

Enhance the end-user experience by allowing users to zoom (scale) and scroll (translate) the chart along its axes using gestures. Customize the actions by specifying which manipulation modes should be used in conjunction with which gestures. The C1Chart control supports the following gestures: double-tap, pinch and slide.

Animation

The plot element animation API simplifies creating various visual animated effects for plot elements. Now you can easily add loading animations to make your charts feel more alive. Alternatively, you can obtain each plot element at run-time and perform custom animations.

Composite Charts

With the C1Chart control you can combine more than one chart type into the same plot. Add any number of data series to the chart; each data series can have a unique chart type.

Stacked Series and Plot Areas

With the ComponentOne Chart control you can stack multiple data series within a single plot by specifying the stacked chart type. You can also stack multiple plot areas horizontally or vertically to create a multi-plot chart.

Chart Legend

Create a separate chart legend using the C1ChartLegend control that connects to the chart through one property. This design provides maximum flexibility when styling and positioning the legend.

Multiple Axes

C1Chart gives you many axis options such as date & time display, logarithmic scales, axis scrolling, custom axis labels and support for multiple axes. Display multiple, dependent axes on the top, bottom, left, or right of the chart by simply adding to the chart's Axes collection.

Aggregate Summaries

By just setting one property you can view calculated aggregates for your charted data. Aggregation options include Sum, Count, Average, Minimum, Maximum, Variance and Standard Deviation.

22 Color Palettes

Choose a color scheme for your charts by just setting one property. Or completely customize the palette by providing a custom collection of Brushes. The freedom and flexibility is there to design the chart to your specifications.

Chart Types Chart for WinRT XAML supports over 30 2D chart types, including bar, column, line, area, pie, scatter, radial, polar, candle, and gantt.

Getting Started with Charts

Step 1: Creating an Application with the C1Chart Control

In this step you'll create a new Windows 8 Style application in Visual Studio 2012 and add the C1Chart control to a page.

1. In Visual Studio 2012 Select File | New | Project.

2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Metro style, and in the templates list select Blank App (XAML).

3. Enter a Name and click OK to create your project.

4. Navigate to the Toolbox and drag the C1Charticon to add the control to the grid. This will add the reference and XAML namespace automatically.

The XAML markup resembles the following:

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Chart:C1Chart/>
    </Grid>

The chart will appear populated with some default data and a C1ChartLegend component will be positioned on the right edge of the control. In the next step we will populate the chart with new data.

5. Inside the Grid, initialize the C1Chart control and give it a name by adding Margin="0,0,8,8" MinHeight="160" MinWidth="240" Name="c1Chart1" to the Chart:C1Chart tag so that it appears similar to the following:

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Chart:C1Chart Margin="0,0,8,8" MinHeight="160" MinWidth="240" Name="c1Chart1" />
    </Grid>

Note that if you run the application now, the chart appears empty since you haven't added data for it yet.

Step 2 of 4: Adding Data to the Chart In the last step, you added the C1Chart control to the Window. In this step, you will add a DataSeries object and data for it. To add data to the chart programmatically in the code behind file

1. Right-click on the MainPage.xaml file and select View Code to open the editor.

2. Add the C1.Xaml.C1Chart namespace directive using C1.Xaml.Chart;

3. Update the MainPage.xaml.cs code so it appears like the following:

using C1.Xaml.Chart;

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

<span style="background: white; color: green;">// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Chart
{
    <span style="background: white; color: gray;">/// <summary>
    /// <span style="background: white; color: green;">An empty page that can be used on its own or navigated to within a Frame.
    <span style="background: white; color: gray;">/// </summary>
    public sealed partial class <span style="background: white; color: #2b91af;">MainPage : <span style="background: white; color: #2b91af;">Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            c1Chart1.Data.Children.Clear();
            <span style="background: white; color: green;">// Add Data
            string[] ProductNames = { "Hand Mixer", "Stand Mixer", "Can Opener", "Toaster", "Blender", "Food Processor", "Slow Cooker", "Microwave" };
            int[] PriceX = { 80, 400, 20, 60, 150, 300, 130, 500 };
            <span style="background: white; color: green;">// create single series for product price
            <span style="background: white; color: #2b91af;">DataSeries ds1 = new <span style="background: white; color: #2b91af;">DataSeries();
            ds1.Label = "Price X";
            <span style="background: white; color: green;">//set price data
            ds1.ValuesSource = PriceX;
            <span style="background: white; color: green;">// add series to the chart
            c1Chart1.Data.Children.Add(ds1);
            <span style="background: white; color: green;">// add item names
            c1Chart1.Data.ItemNames = ProductNames;
            <span style="background: white; color: green;">// Set chart type
            c1Chart1.ChartType = <span style="background: white; color: #2b91af;">ChartType.Bar;
        }

        <span style="background: white; color: gray;">/// <summary>
        /// <span style="background: white; color: green;">Invoked when this page is about to be displayed in a Frame.
        <span style="background: white; color: gray;">/// </summary>
        /// <param name="e"><span style="background: white; color: green;">Event data that describes how this page was reached.  The Parameter
        <span style="background: white; color: gray;">/// <span style="background: white; color: green;">property is typically used to configure the page.<span style="background: white; color: gray;"></param>
        protected override void OnNavigatedTo(<span style="background: white; color: #2b91af;">NavigationEventArgs e)
        {
        }
    }
}

In the next step, Step 3 of 4: Format the Axes, you'll learn how to customize the axes programmatically

What You've Accomplished

You have successfully added data to C1Chart so when you run your application the string values appear on the Y-axis like the following:

Step 3 of 4: Format the Axes

In this step, you will add a ChartView object so you can customize the X-Axis. Add the following code in the MainPage to format the chart axes:

  // set axes titles c1Chart1.View.AxisY.Title = new TextBlock() { Text = "Kitchen Electronics" };
            c1Chart1.View.AxisX.Title = new TextBlock() { Text = "Price" }; // set axes bounds c1Chart1.View.AxisX.Min = 0;
            c1Chart1.View.AxisX.Max = 500;
            c1Chart1.View.AxisX.MajorUnit = 20; // financial formatting c1Chart1.View.AxisX.AnnoFormat = "c"; // axis annotation rotation c1Chart1.View.AxisX.AnnoAngle = 60;

In the next step, Step 4 of 4: Adjust the Chart's Appearance, you'll learn how to customize the chart's appearance programmatically.

What You've Accomplished

You have successfully formatted the Chart Axes so when you run your application the new format for the axis annotation is applied to the chart.

In the next step you will apply a theme and palette to C1Chart to adjust its appearance.

Step 4 of 4: Adjust the Chart's Appearance

In this last step, you'll adjust the chart's appearance using the Theme property and the Palette property. To specifically define the Office2007Blue theme in your chart, add the following code your project:

 c1Chart1.Palette = Palette.Module;
            c1Chart1.Theme = ChartTheme.Office2007Blue;

What You've Accomplished You successfully applied the Office 2007 Blue theme and the Module to the C1Chart control. When you run your application it appears like the following:

Congratulations! You've completed the Chart for Windows WinRT XAML quick start and created a chart application, added data to the chart, set the axes bounds, formatted the axes annotation, and customized the appearance of the chart. See this example in our documentation for both VB and C#

Next part in this blog series: WinRT XAML (Part 6) TileView.

Download Now!