How to: Plot Each XY-Series on a Separate Pane

• Jun 07, 2019
• 2 minutes to read

This example demonstrates the capability of XY-series to be plotted individually in a multiple pane chart.

To accomplish this task, it is necessary to bind each XY-series (e.g., AreaSeries2D, LineSeries2D, BarSideBySideSeries2D objects) to a corresponding pane using the XYDiagram2D.SeriesPane attached property.

MainWindow.xaml

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <dxc:ChartControl>           
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D EnableAxisXNavigation="True">
                    <dxc:XYDiagram2D.PanesPanel>
                        <ItemsPanelTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2*"/>
                                    <RowDefinition Height="1.3*"/>
                                    <RowDefinition Height="1.7*"/>
                                </Grid.RowDefinitions>
                            </Grid>
                        </ItemsPanelTemplate>
                    </dxc:XYDiagram2D.PanesPanel>
                    <dxc:XYDiagram2D.DefaultPane>
                        <dxc:Pane x:Name="pane1" Grid.Row="0">
                            <dxc:Pane.AxisXScrollBarOptions>
                                <dxc:ScrollBarOptions Visible="False" />
                            </dxc:Pane.AxisXScrollBarOptions>
                        </dxc:Pane>
                    </dxc:XYDiagram2D.DefaultPane>
                    <dxc:XYDiagram2D.Panes>
                        <dxc:Pane x:Name="pane2" Grid.Row="1">
                            <dxc:Pane.AxisXScrollBarOptions>
                                <dxc:ScrollBarOptions Visible="False" />
                            </dxc:Pane.AxisXScrollBarOptions>
                        </dxc:Pane>
                        <dxc:Pane x:Name="pane3" Grid.Row="2"/>
                    </dxc:XYDiagram2D.Panes>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D Visible="True" GridSpacing="2"  Interlaced="True">
                            <dxc:AxisX2D.Range>
                                <dxc:AxisRange SideMarginsEnabled="False" />
                            </dxc:AxisX2D.Range>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                    <dxc:XYDiagram2D.Series>
                        <dxc:LineSeries2D ArgumentScaleType="Numerical" >
                            <dxc:LineSeries2D.Label>
                                <dxc:SeriesLabel dxc:MarkerSeries2D.Angle="90"/>
                            </dxc:LineSeries2D.Label>
                            <dxc:LineSeries2D.Points>
                                <dxc:SeriesPoint Value="16.48" Argument="2000"/>
                                <dxc:SeriesPoint Value="23.78" Argument="2001"/>
                                <dxc:SeriesPoint Value="17.74" Argument="2002"/>
                                <dxc:SeriesPoint Value="34.4"  Argument="2003"/>
                                <dxc:SeriesPoint Value="52.5"  Argument="2004"/>
                            </dxc:LineSeries2D.Points>
                        </dxc:LineSeries2D>
                        <dxc:AreaSeries2D  ArgumentScaleType="Numerical" MarkerVisible="False" 
                                           dxc:XYDiagram2D.SeriesPane="{Binding  ElementName=pane2}">
                            <dxc:AreaSeries2D.Label>
                                <dxc:SeriesLabel Visible="False" />
                            </dxc:AreaSeries2D.Label>
                            <dxc:AreaSeries2D.Points>
                                <dxc:SeriesPoint Argument="2000" Value="22.956" />
                                <dxc:SeriesPoint Argument="2001" Value="48.252" />
                                <dxc:SeriesPoint Argument="2002" Value="76.617" />
                                <dxc:SeriesPoint Argument="2003" Value="42.804" />
                                <dxc:SeriesPoint Argument="2004" Value="25.639" />
                            </dxc:AreaSeries2D.Points>
                        </dxc:AreaSeries2D>
                        <dxc:BarSideBySideSeries2D  ArgumentScaleType="Numerical" BarWidth="1.3"
                                                    dxc:XYDiagram2D.SeriesPane="{Binding ElementName=pane3}" >
                            <dxc:BarSideBySideSeries2D.Label>
                                <dxc:SeriesLabel Visible="False" />
                            </dxc:BarSideBySideSeries2D.Label>
                            <dxc:BarSideBySideSeries2D.Points>
                                <dxc:SeriesPoint Argument="2000" Value="12.956" />
                                <dxc:SeriesPoint Argument="2001" Value="65.296" />
                                <dxc:SeriesPoint Argument="2002" Value="24.365" />
                                <dxc:SeriesPoint Argument="2003" Value="62.187" />
                                <dxc:SeriesPoint Argument="2004" Value="26.835" />
                            </dxc:BarSideBySideSeries2D.Points>
                        </dxc:BarSideBySideSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>