This is a migrated thread and some comments may be shown as answers.

Grouped Stacked Range Bar Chart

3 Answers 155 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Willem
Top achievements
Rank 1
Willem asked on 11 Jul 2013, 06:04 AM
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

3 Answers, 1 is accepted

Sort by
0
Rosko
Telerik team
answered on 15 Jul 2013, 11:03 AM
Hello Willem,

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

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

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
Tags
ChartView
Asked by
Willem
Top achievements
Rank 1
Answers by
Rosko
Telerik team
Willem
Top achievements
Rank 1
Share this question
or