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