Side-by-Side Range Bar

• May 28, 2021
• 4 minutes to read

Short Description

The Side-by-Side Range Bar series shows activity bars from different series grouped by their arguments. Each bar displays a range of data with two values for each argument value.

The image below shows an example of the Side-by-Side Range Bar chart:

Series Characteristics

The table below lists the main characteristics of this chart type.

Feature	Value
Series View type	RangeBarSideBySideSeries2D
Diagram type	XYDiagram2D
Number of arguments per series point	1
Number of values per series point	2

For information on which series view types can be combined with the Side-by-Side Range Bar view, refer to the Series Type Compatibility document.

Bind Series to a View Model

Use the Diagram.SeriesItemsSource property to bind chart series to a view model. Define the Diagram.SeriesItemTemplate property to determine how to convert a model object to a series.

XAML

<Window.DataContext>
    <viewModel:ChartViewModel/>
</Window.DataContext>
    <dxc:ChartControl>
        <dxc:XYDiagram2D SeriesItemsSource="{Binding OilPricesSeries}">
            <dxc:XYDiagram2D.SeriesItemTemplate>
                <DataTemplate>
                    <dxc:RangeBarSideBySideSeries2D DisplayName="{Binding CountryName}"
                                                    DataSource="{Binding Values}"
                                                    ArgumentDataMember="Year"
                                                    ValueDataMember="MinValue"
                                                    Value2DataMember="MaxValue" />    
                </DataTemplate>
            </dxc:XYDiagram2D.SeriesItemTemplate>
        </dxc:XYDiagram2D>
    </dxc:ChartControl>
</Window>

C#

public class ChartViewModel {
    public IEnumerable<OilSeries> OilPricesSeries { get; private set; }

    public ChartViewModel() {
        OilPricesSeries = new Collection<OilSeries> {
            new OilSeries {
                CountryName = "USA",
                Values = new Collection<OilPrice> {
                    new OilPrice { Year= new DateTime(2015,1,1), MinValue = 45.13, MaxValue = 55.38},
                    new OilPrice { Year= new DateTime(2015,2,1), MinValue = 51.74, MaxValue = 61.89},
                    new OilPrice { Year= new DateTime(2015,3,1), MinValue = 52, MaxValue = 61.18}
                }
            },
            new OilSeries {
                CountryName = "China",
                Values = new Collection<OilPrice> {
                    new OilPrice { Year= new DateTime(2015,1,1), MinValue =44.08, MaxValue = 52.72},
                    new OilPrice { Year= new DateTime(2015,2,1), MinValue = 47.65, MaxValue = 49.84},
                    new OilPrice { Year= new DateTime(2015,3,1), MinValue = 43.39, MaxValue = 51.53}
                }
            }
        };
    }
}

public class OilSeries {
    public String CountryName { get; set; }
    public IEnumerable<OilPrice> Values { get; set; }
}

public class OilPrice {
    public DateTime Year { get; set; }
    public double MinValue { get; set; }
    public double MaxValue { get; set; }
}

VB.NET

Public Class ChartViewModel
    Private _OilPricesSeries As IEnumerable(Of OilSeries)

    Public Property OilPricesSeries As IEnumerable(Of OilSeries)
        Get
            Return _OilPricesSeries
        End Get
        Private Set(ByVal value As IEnumerable(Of OilSeries))
            _OilPricesSeries = value
        End Set
    End Property

    Public Sub New()
        OilPricesSeries = New Collection(Of OilSeries) From {
            New OilSeries With {
                .CountryName = "USA",
                .Values = New Collection(Of OilPrice) From {
                    New OilPrice With {
                        .Year = New DateTime(2015, 1, 1),
                        .MinValue = 45.13,
                        .MaxValue = 55.38
                    },
                    New OilPrice With {
                        .Year = New DateTime(2015, 2, 1),
                        .MinValue = 51.74,
                        .MaxValue = 61.89
                    },
                    New OilPrice With {
                        .Year = New DateTime(2015, 3, 1),
                        .MinValue = 52,
                        .MaxValue = 61.18
                    }
                }
            },
            New OilSeries With {
                .CountryName = "China",
                .Values = New Collection(Of OilPrice) From {
                    New OilPrice With {
                        .Year = New DateTime(2015, 1, 1),
                        .MinValue = 44.08,
                        .MaxValue = 52.72
                    },
                    New OilPrice With {
                        .Year = New DateTime(2015, 2, 1),
                        .MinValue = 47.65,
                        .MaxValue = 49.84
                    },
                    New OilPrice With {
                        .Year = New DateTime(2015, 3, 1),
                        .MinValue = 43.39,
                        .MaxValue = 51.53
                    }
                }
            }
        }
    End Sub
End Class

Public Class OilSeries
    Public Property CountryName As String
    Public Property Values As IEnumerable(Of OilPrice)
End Class

Public Class OilPrice
    Public Property Year As Date
    Public Property MinValue As Double
    Public Property MaxValue As Double
End Class

Add Series Points in Markup

Populate the RangeBarSideBySideSeries2D.Points collection with SeriesPoint objects to define the Side-by-Side Range Bar series in markup:

XAML

<dxc:XYDiagram2D>
    <dxc:XYDiagram2D.Series>
        <dxc:RangeBarSideBySideSeries2D x:Name="rangeBar"  ArgumentScaleType="DateTime">
            <dxc:RangeBarSideBySideSeries2D.Points>
                <dxc:SeriesPoint Argument="01/01/2010" Value="73.39" dxc:RangeBarSeries2D.Value2="84.68"/>
                <dxc:SeriesPoint Argument="02/01/2010" Value="71.19" dxc:RangeBarSeries2D.Value2="80.16"/>
                <dxc:SeriesPoint Argument="03/01/2010" Value="77.1" dxc:RangeBarSeries2D.Value2="81.18"/>
                <!--...-->
            </dxc:RangeBarSideBySideSeries2D.Points>
        </dxc:RangeBarSideBySideSeries2D>
    </dxc:XYDiagram2D.Series>
</dxc:XYDiagram2D>

Add Series Points in Code

The following example creates a SeriesPoint object in code. Call the SeriesPoint.SetValue method and pass the RangeBarSeries2D.Value2Property as a parameter to set the second point value:

XAML

<dxc:XYDiagram2D.Series>
    <dxc:RangeBarSideBySideSeries2D x:Name="rangeBar"  ArgumentScaleType="DateTime">
    </dxc:RangeBarSideBySideSeries2D>
</dxc:XYDiagram2D.Series>

C#

SeriesPoint point = new SeriesPoint(new DateTime(2010, 10, 15), 71);
point.SetValue(RangeBarSeries2D.Value2Property, 90d);
rangeBar.Points.Add(point);

VB.NET

Dim point As SeriesPoint = New SeriesPoint(New DateTime(2010, 10, 15), 71)
point.SetValue(RangeBarSeries2D.Value2Property, 90R)
rangeBar.Points.Add(point)

Example

The following example creates a 2D Side-by-Side Range Bar chart.

• How to: Create a 2D Side-by-Side Range Bar Chart