Skip to main content
BuyLog In
Silverlight Controls
Search in…
Docs > Silverlight Controls > Controls > Chart Control > Getting Started > Lesson 1 - Create a Simple Chart
All docs
V14.2
Silverlight Controls
What Is New
Installation and Demos
Common Concepts
Controls
Reporting
Data Grid
Ribbon Controls
Toolbar-Menu
Chart Control
Product Information
Getting Started
Lesson 1 - Create a Simple Chart
Lesson 2 - Bind Chart Series to Data
Lesson 3 - Using a Series Template for an Auto-Created Series
Fundamentals
Concepts
Visual Elements
Examples
Pivot Grid
Scheduler
Rich Text Editor
Tree List
Gauge Controls
Map Control
Dock Windows
Tile and Layout
Printing-Exporting
Data Editors
Navigation Bar
Utility Controls
Spell Checker
LightSwitch Reporting
Localization
Redistribution and Deployment
Get More Help
API Reference

Lesson 1 - Create a Simple Chart

  • 4 minutes to read
In This Article
Steps 1-4. Create a New Project and Add a Chart Control
Steps 5-9. Provide Chart Data
Steps 10-15. Customize a Chart
Result

This lesson demonstrates how to create a simple chart with two Side-by-Side Bar series, populate it with data and adjust its common settings.

To create a simple charting application, do the following.

#Steps 1-4. Create a New Project and Add a Chart Control

  1. Run MS Visual Studio 2010, 2012 or 2013.
  2. Create a new Silverlight Application project.

  3. Add the ChartControl object to your project. You can do this by dragging the ChartControl item from the DX.14.2: Data & Analytics toolbox tab.

    Toolbox_ChartControl

  4. Right-click the ChartControl object and choose the Reset Layout | All option in the context menu. This will stretch the chart to fill the whole window.

    Reset Layout

After this, your XAML may look like the following. If it doesn't, you can overwrite your code with:


<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="sl.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <dxc:ChartControl/>
    </Grid>
</UserControl>

Note that you can add ChartControl by overwriting your MainPage.xaml file with this code without dragging ChartControl to the window. However, in this case, you need to manually add references to the following libraries.

DevExpress.Data.v14.2, DevExpress.Xpf.Core.v14.2, DevExpress.Charts.v14.2.Core, DevExpress.Xpf.Charts.v14.2, DevExpress.Xpf.Mvvm.v14.2.

SolutionExplorer_Add reference

NOTE

You can find these assemblies in the following path.

C:\Program Files (x86)\DevExpress 14.2\Components\Bin\Silverlight

Let's go to the next step and specify the diagram type, add the Side-by-Side Bar series to the chart and populate series points with data.

#Steps 5-9. Provide Chart Data

We need to fill our chart with data. Let's start with selecting the diagram type.

  1. Locate the ChartControl.Diagram property in the Properties grid and set it to XYDiagram2D.

    Lesson1_Add XYDiagram2D

  2. Then, locate the Diagram.Series property and click the ellipsis button to invoke the Collection Editor: Series. In this editor, add two BarSideBySideSeries2D.

    Add_Two_BarSideBySide2D

  3. For each series, locate the Series.Points property and add 4 SeriesPoint objects to them.

    Add_SeriesPoints

  4. For each series point, set the argument and value as follows.

    A-1, B-2, C-3, D-4.

    SeriesPoint_Argument_Value

  5. Do the same for another series with these values.

    A-4, B-3, C-2, D-1.

After finishing these steps, you will get the following XAML.


<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="sl.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <dxc:ChartControl>                 
            <dxc:XYDiagram2D>
                <dxc:BarSideBySideSeries2D>                    
                    <dxc:SeriesPoint Argument="A" Value="1"/>
                    <dxc:SeriesPoint Argument="B" Value="2"/>
                    <dxc:SeriesPoint Argument="C" Value="3"/>
                    <dxc:SeriesPoint Argument="D" Value="4"/>
                </dxc:BarSideBySideSeries2D>
                <dxc:BarSideBySideSeries2D>                    
                    <dxc:SeriesPoint Argument="A" Value="4"/>
                    <dxc:SeriesPoint Argument="B" Value="3"/>
                    <dxc:SeriesPoint Argument="C" Value="2"/>
                    <dxc:SeriesPoint Argument="D" Value="1"/>
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</UserControl>

#Steps 10-15. Customize a Chart

Through these steps we will learn how to customize our chart: create a legend, change the style of series, etc.

Adjust the Legend.

  1. Now, we'll create a legend for our chart. To do this, locate the ChartControl.Legend property in the Property grid and select the Legend item in the drop-down list.

    Lesson1_SelectLegend

  2. To change a legend's position, set its Margin property to 10, 0, 0, 0.

Adjust series-view specific options.

  1. Let's make our chart look 3D. To do this, locate the BarSideBySideSeries2D object's BarSeries2D.Model property and select Quasi3DBar2DModel from the drop-down list.

    Lesson1_SelectQuasi3DBar2DModel

  2. To specify how a series is indicated in a legend, set the Series.DisplayName property value of the first series to MySeries1.

    Lesson1_SpecifyDisplayName

  3. Repeat steps 12-13 for another series (but set its display name to MySeries2).

Customize Crosshair Cursor Options.

  1. Crosshair cursor labels and a crosshair argument line are displayed on a chart by default. You can disable (enable) a crosshair cursor at the chart level (using the ChartControl.CrosshairEnabled property) and at the series level (using the XYSeries2D.CrosshairEnabled property).

    To show crosshair cursor value lines and crosshair cursor axis labels, set the CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels and CrosshairOptions.ShowValueLabels properties to true.

#Result

After performing all the steps, your XAML should look as follows.


<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="sl.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <dxc:ChartControl>
            <dxc:ChartControl.CrosshairOptions>
                <dxc:CrosshairOptions ShowValueLabels="True" ShowValueLine="True" ShowArgumentLabels="True"/>
            </dxc:ChartControl.CrosshairOptions>
            <dxc:ChartControl.Legend>
                <dxc:Legend Margin="10,0,0,0"/>
            </dxc:ChartControl.Legend>           
            <dxc:XYDiagram2D>
                <dxc:BarSideBySideSeries2D DisplayName="MySeries1">
                    <dxc:BarSideBySideSeries2D.Model>
                        <dxc:Quasi3DBar2DModel/>
                    </dxc:BarSideBySideSeries2D.Model>
                    <dxc:SeriesPoint Argument="A" Value="1"/>
                    <dxc:SeriesPoint Argument="B" Value="2"/>
                    <dxc:SeriesPoint Argument="C" Value="3"/>
                    <dxc:SeriesPoint Argument="D" Value="4"/>
                </dxc:BarSideBySideSeries2D>
                <dxc:BarSideBySideSeries2D DisplayName="MySeries2">
                    <dxc:BarSideBySideSeries2D.Model>
                        <dxc:Quasi3DBar2DModel/>
                    </dxc:BarSideBySideSeries2D.Model>
                    <dxc:SeriesPoint Argument="A" Value="4"/>
                    <dxc:SeriesPoint Argument="B" Value="3"/>
                    <dxc:SeriesPoint Argument="C" Value="2"/>
                    <dxc:SeriesPoint Argument="D" Value="1"/>
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</UserControl>

Run the project. The following image shows the resulting chart at runtime.

SimpleChart_Result

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3443.

See Also