The requested page is not available for the requested platform. You are viewing the content for Default platform.

Lesson 1 - Creating a Cartesian Chart

This lesson demonstrates how to create a simple Cartesian chart with three Stacked Bar series, populate them with data and adjust common settings.

To create a simple charting application, do the following.

Step 1. Create a New Project and Add a Chart Control

  • Run MS Visual Studio 2017.
  • Create a new Universal | Blank App (Universal Windows) project.

    lesson1-01-new-project

  • Switch to the MainPage.xaml design view and add the CartesianChart control to the main page. To do this, drag and drop the CartesianChart item from the DX.18.2: Visualization toolbox tab.

    lesson1-02-toolbox

    Note

    After that, the following SDK extensions will be added to the References list of your project: DevExpress.Core and DevExpress.Visualization.

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

    lesson1-03-reset-layout

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

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Charts="using:DevExpress.UI.Xaml.Charts"
    x:Class="CartesianChartLesson.MainPage">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Charts:CartesianChart/>

    </Grid>
</Page>

Let's proceed to the next step, and see how to add series to the chart and provide series points with data.

Step 2. Provide Chart Data

In this step, the chart will be manually populated with data.

  • For the CartesianChart control, locate the ChartBase.Series property and click the ellipsis button to invoke the Series Collection Editor: Series dialog. In this dialog, add a Series object to the collection.

    lesson1-04-add-series

  • Set the Series.DisplayName property to 1998. The property value will be used to identify the series in the chart's legend.

    Lesson1_DisplayName

  • After that, specify a series view for the series. To do this, assign a SideBySideBarSeriesView object to the Series.View property.

    Lesson1_Series_View

  • To manually provide data for a series, it's necessary to assign a DataPointCollection object to the Series.Data property.

    Lesson1_Series_Data

    Note

    It is possible to modify the DataPoint.ArgumentScaleType and DataPoint.ValueScaleType properties if you wish to disable automatic data type detection and explicitly specify how a chart should treat data in data points.

  • Add the following DataPoint objects to the DataPointCollection.Points collection.

    Argument Value
    Illinois 423.721
    Indiana 178.719
    Michigan 308.845
    Ohio 348.555
    Wisconsin 160.274

    Lesson1_Points

  • Repeat this step to add two series with names 2001 and 2004. Populate this series with data point values and arguments represented in the table below.

    Argument 2001 Series Value 2004 Series Value
    Illinois 476.851 528.904
    Indiana 195.769 227.271
    Michigan 335.793 372.576
    Ohio 374.771 418.258
    Wisconsin 182.373 211.727

After completing this, the XAML should look like following.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Charts="using:DevExpress.UI.Xaml.Charts"
    x:Class="CartesianChartLesson.MainPage">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Charts:CartesianChart>
            <Charts:CartesianChart.Series>
                <Charts:Series 
                    DisplayName="1998">
                    <Charts:Series.View>
                        <Charts:SideBySideBarSeriesView/>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Illinois" 
                            Value="423.721"/>
                        <Charts:DataPoint 
                            Argument="Indiana" 
                            Value="178.719"/>
                        <Charts:DataPoint 
                            Argument="Michigan" 
                            Value="308.845"/>
                        <Charts:DataPoint 
                            Argument="Ohio" 
                            Value="348.555"/>
                        <Charts:DataPoint 
                            Argument="Wisconsin" 
                            Value="160.274"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
                <Charts:Series 
                    DisplayName="2001">
                    <Charts:Series.View>
                        <Charts:SideBySideBarSeriesView/>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Illinois"
                            Value="476.851"/>
                        <Charts:DataPoint 
                            Argument="Indiana" 
                            Value="195.769"/>
                        <Charts:DataPoint 
                            Argument="Michigan" 
                            Value="335.793"/>
                        <Charts:DataPoint 
                            Argument="Ohio"
                            Value="374.771"/>
                        <Charts:DataPoint 
                            Argument="Wisconsin" 
                            Value="182.373"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
                <Charts:Series 
                    DisplayName="2004">
                    <Charts:Series.View>
                        <Charts:SideBySideBarSeriesView/>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Illinois" 
                            Value="528.904"/>
                        <Charts:DataPoint 
                            Argument="Indiana"
                            Value="227.271"/>
                        <Charts:DataPoint 
                            Argument="Michigan" 
                            Value="372.576"/>
                        <Charts:DataPoint 
                            Argument="Ohio" 
                            Value="418.258"/>
                        <Charts:DataPoint 
                            Argument="Wisconsin" 
                            Value="211.727"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
            </Charts:CartesianChart.Series>
        </Charts:CartesianChart>

    </Grid>
</Page>

Step 3. Customize the Chart

In this step, customize the chart's legend and the Y-axis to improve chart readabilty.

Result

Now our chart is ready. Your code and XAML should look as follows.

<Page
    x:Class="CartesianChartLesson.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Charts="using:DevExpress.UI.Xaml.Charts">

    <Grid 
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charts:CartesianChart Margin="16">
            <Charts:CartesianChart.Palette>
                <Charts:OfficePalette/>
            </Charts:CartesianChart.Palette>
            <Charts:CartesianChart.AxisY>
                <Charts:AxisY>
                    <Charts:AxisY.Title>
                        <Charts:AxisTitle 
                            Content="Millions of USD" />
                    </Charts:AxisY.Title>
                </Charts:AxisY>
            </Charts:CartesianChart.AxisY>
            <Charts:CartesianChart.Legend>
                <Charts:Legend 
                    VerticalPosition="TopOutside" 
                    HorizontalPosition="Right"/>
            </Charts:CartesianChart.Legend>
            <Charts:CartesianChart.Series>
                <Charts:Series 
                    DisplayName="1998">
                    <Charts:Series.View>
                        <Charts:SideBySideBarSeriesView/>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Illinois" 
                            Value="423.721"/>
                        <Charts:DataPoint 
                            Argument="Indiana" 
                            Value="178.719"/>
                        <Charts:DataPoint 
                            Argument="Michigan" 
                            Value="308.845"/>
                        <Charts:DataPoint 
                            Argument="Ohio" 
                            Value="348.555"/>
                        <Charts:DataPoint 
                            Argument="Wisconsin" 
                            Value="160.274"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
                <Charts:Series 
                    DisplayName="2001">
                    <Charts:Series.View>
                        <Charts:SideBySideBarSeriesView/>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Illinois"
                            Value="476.851"/>
                        <Charts:DataPoint 
                            Argument="Indiana" 
                            Value="195.769"/>
                        <Charts:DataPoint 
                            Argument="Michigan" 
                            Value="335.793"/>
                        <Charts:DataPoint 
                            Argument="Ohio"
                            Value="374.771"/>
                        <Charts:DataPoint 
                            Argument="Wisconsin" 
                            Value="182.373"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
                <Charts:Series 
                    DisplayName="2004">
                    <Charts:Series.View>
                        <Charts:SideBySideBarSeriesView/>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Illinois" 
                            Value="528.904"/>
                        <Charts:DataPoint 
                            Argument="Indiana"
                            Value="227.271"/>
                        <Charts:DataPoint 
                            Argument="Michigan" 
                            Value="372.576"/>
                        <Charts:DataPoint 
                            Argument="Ohio" 
                            Value="418.258"/>
                        <Charts:DataPoint 
                            Argument="Wisconsin" 
                            Value="211.727"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
            </Charts:CartesianChart.Series>
        </Charts:CartesianChart>
    </Grid>
</Page>

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

lesson1-result