How to: Plot Each XY-Series on a Separate Pane
- 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, use the XYDiagram2D.PaneLayout property to arrange panes in a grid, and use the XYSeries2D.Pane property to bind each XY series, such as AreaSeries2D, LineSeries2D, BarSideBySideSeries2D objects, to the corresponding pane.
<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.PaneLayout>
<dxc:GridLayout>
<dxc:GridLayout.RowDefinitions>
<dxc:LayoutDefinition Size="2*"/>
<dxc:LayoutDefinition Size="1.3*"/>
<dxc:LayoutDefinition Size="1.7*"/>
</dxc:GridLayout.RowDefinitions>
</dxc:GridLayout>
</dxc:XYDiagram2D.PaneLayout>
<dxc:XYDiagram2D.DefaultPane>
<dxc:Pane x:Name="pane1" dxc:GridLayout.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" dxc:GridLayout.Row="1">
<dxc:Pane.AxisXScrollBarOptions>
<dxc:ScrollBarOptions Visible="False" />
</dxc:Pane.AxisXScrollBarOptions>
</dxc:Pane>
<dxc:Pane x:Name="pane3" dxc:GridLayout.Row="2"/>
</dxc:XYDiagram2D.Panes>
<dxc:XYDiagram2D.AxisX>
<dxc:AxisX2D Visible="True" Interlaced="True">
<dxc:AxisX2D.NumericScaleOptions>
<dxc:ContinuousNumericScaleOptions AutoGrid="False" GridSpacing="2" />
</dxc:AxisX2D.NumericScaleOptions>
<dxc:AxisX2D.WholeRange>
<dxc:Range SideMarginsValue="0" />
</dxc:AxisX2D.WholeRange>
</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"
Pane="{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"
Pane="{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>
See Also