Side-by-Side Range Bar

  • 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:

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.

<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>
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; }
}

Add Series Points in Markup

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

<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:

<dxc:XYDiagram2D.Series>
    <dxc:RangeBarSideBySideSeries2D x:Name="rangeBar"  ArgumentScaleType="DateTime">
    </dxc:RangeBarSideBySideSeries2D>
</dxc:XYDiagram2D.Series>
SeriesPoint point = new SeriesPoint(new DateTime(2010, 10, 15), 71);
point.SetValue(RangeBarSeries2D.Value2Property, 90d);
rangeBar.Points.Add(point);

Example

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

See Also