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

Lesson 2 - Creating a Pie Chart

  • 3 min to read

This lesson demonstrates how to create a simple Pie chart with a single Pie series, populate the chart with data and adjust common settings.

Do the following to create a simple chart application.

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

To do this, run MS Visual Studio 2017. Create a new application by choosing New Project from the File menu or by pressing Ctrl+Shift+N. Next, select Universal, and then choose Blank App (Universal Windows). Switch to the MainPage.xaml design view and add the PieChart control to the main page by dragging and dropping the PieChart item from the DX.18.2: Visualization toolbox tab.

lesson2-02-toolbox

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

lesson1-03-reset-layout

Note

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

Your XAML may look like the following code. If it doesn't, you can overwrite your code as follows:

<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="PieChart.MainPage">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Charts:PieChart/>

    </Grid>
</Page>

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

Step 2. Provide Chart Data

First, you need to fill the chart with data. Let's start by adding a series.

  • For the PieChart control, locate the ChartBase.Series property and click the ellipsis button to invoke the Object Collection Editor: Series dialog. Add one Series object to the collection in this dialog.

    lesson2-04-add-series

  • Next, specify a series view for the series by setting the Series.View property to PieSeriesView.

    Lesson2_View

  • To provide data for a series, it is necessary to assign a DataPointCollection to the Series.Data property and fill it with DataPoint objects. To do this, add data points with the following arguments and values.

    Argument Value
    Russia 17.0752
    Canada 9.98467
    USA 9.63142
    China 9.59696
    Brazil 8.511965
    Australia 7.68685
    India 3.28759
    Others 81.2

    Lesson2_DataPoints

Step 3. Customize the Chart's View

In this step, the view of the chart will be customized.

Result

Your chart is now ready. Your XAML should appear as follows:

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

    <Page.Resources>
        <local:MyConverter x:Key="converter"/>
    </Page.Resources>

    <Grid 
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charts:PieChart >
            <Charts:PieChart.Palette>
                <Charts:OfficePalette/>
            </Charts:PieChart.Palette>
            <Charts:PieChart.Legend>
                <Charts:Legend/>
            </Charts:PieChart.Legend>
            <Charts:PieChart.Series>
                <Charts:Series 
                    x:Name="series" 
                    DisplayName="Area of Countries">
                    <Charts:Series.View>
                        <Charts:DonutSeriesView 
                            HoleRadiusPercent="70" 
                            LegendPointPattern="{}{A}: {VP:P}">
                            <Charts:DonutSeriesView.Title>
                                <Charts:SeriesTitle
                                    Content="Area of Countries"/>
                            </Charts:DonutSeriesView.Title>
                        </Charts:DonutSeriesView>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Russia" 
                            Value="17.0752" />
                        <Charts:DataPoint 
                            Argument="Canada"
                            Value="9.98467" />
                        <Charts:DataPoint 
                            Argument="USA" 
                            Value="9.63142" />
                        <Charts:DataPoint 
                            Argument="China" 
                            Value="9.59696" />
                        <Charts:DataPoint 
                            Argument="Brazil" 
                            Value="8.511965" />
                        <Charts:DataPoint 
                            Argument="Australia" 
                            Value="7.68685" />
                        <Charts:DataPoint 
                            Argument="India" 
                            Value="3.28759" />
                        <Charts:DataPoint 
                            Argument="Others" 
                            Value="81.2"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
            </Charts:PieChart.Series>
        </Charts:PieChart>
    </Grid>
</Page>

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

lesson2-result