Script 5: Chart in Studio for WinRT XAML

image 

 

· Chart 

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!

Features

  • 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. See the full list of supported chart types.

image

 

 

  • 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.

image

 

 

  • 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.

image

 

 

  • 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.

image

 

 

  • 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.

image

 

 

  • 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.

image

 



Chart Types

Chart for WinRT XAML supports over 30 2D chart types, including bar, column, line, area, pie, scatter, radial, polar, candle, and gantt.
image    imageArea SmoothedimageArea Stacked
imageArea Stacked 100%imageBarimageBar Stacked
imageBar Stacked 100%imageBubbleimageCandle
imageColumnimageColumn StackedimageColumn Stacked 100%
imageGanttimageHi-Lo-Open-CloseimageLine
imageLine SmoothedimageLine SymbolsimageLine Symbols Smoothed
imageLine StackedimageLine Stacked 100%imagePie
imagePie StackedimagePie DoughnutimagePie Doughnut Exploded
imagePolarimagePolar SymbolsimagePolygon
imagePolygon FilledimageRadarimageRadar Filled
imageRadar SymbolsimageStepimageStep Filled
imageStep SymbolsimageXY Plot 

Getting Started with Chart:

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). Enter a Name and click OK to create your project.

4.   Navigate to the Toolbox and drag the C1Chart icon 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;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Chart
{
/// <summary>
///
An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
c1Chart1.Data.Children.Clear();
// 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 };
// create single series for product price
DataSeries ds1 = new DataSeries();
ds1.Label =
"Price X";
//set price data
ds1.ValuesSource = PriceX;
// add series to the chart
c1Chart1.Data.Children.Add(ds1);
// add item names
c1Chart1.Data.ItemNames = ProductNames;
// Set chart type
c1Chart1.ChartType = ChartType.Bar;
}

/// <summary>
///
Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">
Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(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:

image

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.

image

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:

image

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