Hi,
I need to implement a chart similar to the one shown in the picture attached.
I was thinking I could do this using RadCartesianChart RangeBarSeries with series stacked and grouped however there is no StackGroupKey implemented for RangeBarSeries.
Could you please advise how to achieve this?
Regards
Willem
I need to implement a chart similar to the one shown in the picture attached.
I was thinking I could do this using RadCartesianChart RangeBarSeries with series stacked and grouped however there is no StackGroupKey implemented for RangeBarSeries.
Could you please advise how to achieve this?
Regards
Willem
3 Answers, 1 is accepted
0
Hello Willem,
Currently, this can be achieved with only one RangeBarSeries. Check he code below:
I hope this helps.
Regards,
Rosko
Telerik
Currently, this can be achieved with only one RangeBarSeries. Check he code below:
<
telerik:RadCartesianChart
>
<
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:CategoricalAxis
/>
</
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:LinearAxis
/>
</
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:RadCartesianChart.Series
>
<
telerik:RangeBarSeries
CombineMode
=
"None"
>
<
telerik:RangeBarSeries.PointTemplates
>
<
DataTemplate
>
<
Rectangle
Fill
=
"#7A0029"
/>
</
DataTemplate
>
<
DataTemplate
>
<
Rectangle
Fill
=
"#F70758"
/>
</
DataTemplate
>
</
telerik:RangeBarSeries.PointTemplates
>
<
telerik:RangeBarSeries.DataPoints
>
<
telerik:RangeDataPoint
Category
=
"1"
Low
=
"0"
High
=
"19"
/>
<
telerik:RangeDataPoint
Category
=
"1"
Low
=
"2"
High
=
"15"
/>
<
telerik:RangeDataPoint
Category
=
"1"
Low
=
"-19"
High
=
"0"
/>
<
telerik:RangeDataPoint
Category
=
"1"
Low
=
"-15"
High
=
"-2"
/>
<
telerik:RangeDataPoint
Category
=
"2"
Low
=
"0"
High
=
"19"
/>
<
telerik:RangeDataPoint
Category
=
"2"
Low
=
"2"
High
=
"15"
/>
<
telerik:RangeDataPoint
Category
=
"2"
Low
=
"-19"
High
=
"0"
/>
<
telerik:RangeDataPoint
Category
=
"2"
Low
=
"-15"
High
=
"-2"
/>
<
telerik:RangeDataPoint
Category
=
"3"
Low
=
"0"
High
=
"19"
/>
<
telerik:RangeDataPoint
Category
=
"3"
Low
=
"2"
High
=
"15"
/>
<
telerik:RangeDataPoint
Category
=
"3"
Low
=
"-19"
High
=
"0"
/>
<
telerik:RangeDataPoint
Category
=
"3"
Low
=
"-15"
High
=
"-2"
/>
</
telerik:RangeBarSeries.DataPoints
>
</
telerik:RangeBarSeries
>
</
telerik:RadCartesianChart.Series
>
</
telerik:RadCartesianChart
>
I hope this helps.
Regards,
Rosko
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Willem
Top achievements
Rank 1
answered on 16 Jul 2013, 01:10 AM
Hi Rosko,
Thanks for your reply.
The issue here is that I want to display two series side by side, with the solution above setting the CombineMode to Cluster to fit in another series next to this series will break up the data points.
I have included a sample project with two series and the data we want to display. Currently in the sample project the series are displayed as solid blocks however we what to display each block as shown in the sample you provided above (i.e. with colour bands for the data items Mean, FirstInterval and SecondInterval).
Regards
Willem
Thanks for your reply.
The issue here is that I want to display two series side by side, with the solution above setting the CombineMode to Cluster to fit in another series next to this series will break up the data points.
I have included a sample project with two series and the data we want to display. Currently in the sample project the series are displayed as solid blocks however we what to display each block as shown in the sample you provided above (i.e. with colour bands for the data items Mean, FirstInterval and SecondInterval).
<
telerik:RadCartesianChart
>
<
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:DateTimeCategoricalAxis
/>
</
telerik:RadCartesianChart.HorizontalAxis
>
<
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:LinearAxis
/>
</
telerik:RadCartesianChart.VerticalAxis
>
<
telerik:RadCartesianChart.Series
>
<
telerik:RangeBarSeries
CombineMode
=
"Cluster"
ItemsSource
=
"{Binding ElementName=chart, Path=DataItemsFirstSeries}"
HighBinding
=
"Maximum"
LowBinding
=
"Minimum"
CategoryBinding
=
"Date"
>
<
telerik:RangeBarSeries.PointTemplates
>
<
DataTemplate
>
<
Rectangle
Fill
=
"#7A0029"
/>
</
DataTemplate
>
</
telerik:RangeBarSeries.PointTemplates
>
</
telerik:RangeBarSeries
>
<
telerik:RangeBarSeries
CombineMode
=
"Cluster"
ItemsSource
=
"{Binding ElementName=chart, Path=DataItemsSecondSeries}"
HighBinding
=
"Maximum"
LowBinding
=
"Minimum"
CategoryBinding
=
"Date"
>
<
telerik:RangeBarSeries.PointTemplates
>
<
DataTemplate
>
<
Rectangle
Fill
=
"#F70758"
/>
</
DataTemplate
>
</
telerik:RangeBarSeries.PointTemplates
>
</
telerik:RangeBarSeries
>
</
telerik:RadCartesianChart.Series
>
</
telerik:RadCartesianChart
>
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
DataItemsFirstSeries = new ObservableCollection<
DataItem
>();
DataItemsFirstSeries.Add(new DataItem { Date = new DateTime(2013, 1, 1), Maximum = 20, FirstInterval = 18, Mean = 10, SecondInterval = 2, Minimum = 0 });
DataItemsFirstSeries.Add(new DataItem { Date = new DateTime(2013, 2, 1), Maximum = 16, FirstInterval = 14, Mean = 8, SecondInterval = -4, Minimum = -10 });
DataItemsFirstSeries.Add(new DataItem { Date = new DateTime(2013, 3, 1), Maximum = 2, FirstInterval = -4, Mean = -10, SecondInterval = -18, Minimum = -20 });
DataItemsSecondSeries = new ObservableCollection<
DataItem
>();
DataItemsSecondSeries.Add(new DataItem { Date = new DateTime(2013, 1, 1), Maximum = 22, FirstInterval = 20, Mean = 12, SecondInterval = 4, Minimum = 2 });
DataItemsSecondSeries.Add(new DataItem { Date = new DateTime(2013, 2, 1), Maximum = 10, FirstInterval = 8, Mean = -1, SecondInterval = -8, Minimum = -12 });
DataItemsSecondSeries.Add(new DataItem { Date = new DateTime(2013, 3, 1), Maximum = 0, FirstInterval = -2, Mean = -8, SecondInterval = -16, Minimum = -18 });
}
public ObservableCollection<
DataItem
> DataItemsFirstSeries { get; set; }
public ObservableCollection<
DataItem
> DataItemsSecondSeries { get; set; }
}
public class DataItem
{
public DateTime Date { get; set; }
public decimal Maximum { get; set; }
public decimal FirstInterval { get; set; }
public decimal Mean { get; set; }
public decimal SecondInterval { get; set; }
public decimal Minimum { get; set; }
}
Willem
0
Willem
Top achievements
Rank 1
answered on 18 Jul 2013, 06:25 AM
Hi Rosko,
An update on this issue.
We have managed to implement the desired functionality by having three ranged bar series layered on each other using three separate horizontal axes. Two of the axes being invisible so they dont display on the chart.
Regards
Willem
An update on this issue.
We have managed to implement the desired functionality by having three ranged bar series layered on each other using three separate horizontal axes. Two of the axes being invisible so they dont display on the chart.
Regards
Willem