Version

Creating Chart in MS Blend

Topic Overview

Purpose

This topic provides detailed instruction on how to create the XamDataChart control in the Microsoft® Blend.

Required Background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides a general overview of the XamDataChart control

This topic provides information on how to get started with the XamDataChart control.

This topic provides information on requirements of Series objects in the XamDataChart control.

Overview

Preview

The following is the preview of the result of this topic

DataChart Creating Chart In MS Blend 1.png

Application Requirements

The following table lists requirements for creating the XamDataChart control.

Requirement Description

Install Infragistics product

The chart control is part of Infragistics product

Data Source

The chart control requires some data source and this topic provides Sample Energy Data as sample data source. You can use this data source or add your own data. Refer to Series Requirements topic for information on requirements of all types of chart series.

Chart Requirements

The chart control supports various types of data visualizations called Series. These series objects can visualize wide range of data source. Refer to the Series Types topic for complete list of series supported in the chart control. Each type of series can plot data that meets certain requirements (such as number of data column and their types) as well as what type of axis can be used with it. Refer to the Series Requirements topic for requirements for each of the series.

For demonstration purpose, this topic uses Sample Energy Data with only one AreaSeries and two axes: CategoryXAxis and NumericYAxis.

Creating Application

Create WPF application project in the Microsoft® Blend.

Note
Note

You don’t need to add any references to Infragistics components because they will be added automatically when you drag and drop Infragistics DataChart control to designer surface.

Creating Data Source

Copy sample data code from the Sample Energy Data resource and add it to your project.

Creating Chart

  1. In the Assets toolbox panel, navigate to the XamDataChart control.

  1. Drag and drop the XamDataChart control to design surface.

  1. Select the XamDataChart control and go to Properties panel.

DataChart Creating Chart In MS Blend 2.png

The following Infragistics Libraries will be added to your project:

  • InfragisticsWPF.Controls.Charts.XamDataChart.dll

  • InfragisticsWPF.DataVisualization.dll

  • InfragisticsWPF.v24.2.dll

  1. In the Properties panel, navigate to the DataContext property

  1. Click the New button.

  1. Select EnergyProductionData object and then click the OK button.

DataChart Creating Chart In MS Blend 8.png

Creating Axes

  1. In the Properties panel, navigate to the Axes (Collection) property of the Data Chart control

  1. Click ellipses (…) button next to Axes (Collection) property.

DataChart Creating Chart In MS Blend 4.png
  1. Select CategoryXAxis from drop-down control and click the Add button.

  1. Select NumericYAxis from drop-down control and click the Add button.

DataChart Creating Chart In MS Blend 5.png
  1. Click the OK button to close the Axes Collection Editor.

  1. In design surface, change current selection to the CategoryXAxis object:

    • Right click on center of the Data Chart

    • Navigate to the Set Current Selection menu item

    • Select the CategoryXAxis menu item

  1. In Properties panel, set the following properties of the CategoryXAxis object:

Property Name Property Type Property Value Notes

Name

string

xAxis

Sets the identifying name of the axis element

string

{Binding}

Sets the ItemsSource property for the axis

string

{}{Country}

Sets the axis label format string

string

X-Axis

Sets the displayed title for the axis

  1. In design surface, change current selection to the NumericYAxis object:

    • Right click on center of the Data Chart

    • Navigate to the Set Current Selection menu item

    • Select the NumericYAxis menu item

  1. In Properties panel, set the following properties of the NumericYAxis object:

Property Name Property Type Property Value Notes

Name

string

yAxis

Sets the identifying name of the axis element

string

Y-Axis

Sets the displayed title for the axis

Note
Note

Numeric YAxis automatically calculates MinimumValue and MaximumValue based on range of data bound to the Series objects and you don’t have sets these properties.

Creating Series

  1. In the Properties panel, navigate to the Series (Collection) property of the Data Chart control.

  1. Click ellipses (…) button next to Series (Collection) property.

DataChart Creating Chart In MS Blend 6.png
  1. Select AreaSeries from drop-down control and click the Add button.

DataChart Creating Chart In MS Blend 7.png
  1. Click the OK button to close the Series Collection Editor

  1. In design surface, change current selection to the AreaSeries object

    • Right click on center of the Data Chart

    • Navigate to the Set Current Selection menu item

    • Select the AreaSeries menu item

  1. In Properties panel, set the following properties of the AreaSeries object

Property Name Property Type Property Value Notes

Name

string

AreaSeries

Sets the identifying name of the axis element

string

{Binding}

Sets the ItemsSource property for the axis

string

Coal

Sets the value mapping property for the series object

string

{Binding ElementName=xAxis}

Sets the effective x-axis for this series

string

{Binding ElementName=yAxis}

Sets the effective y-axis for this series

Note
Note

Element names of bindings for axis properties must match names that were set on axis objects in previous section.

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides a general overview of the XamDataChart control

This topic provides information on how to get started with the XamDataChart control.

This topic provides information on requirements of Series objects in the XamDataChart control.