Grouped Stacked Range Bar Chart

4 posts, 0 answers
  1. Willem
    Willem avatar
    12 posts
    Member since:
    Nov 2012

    Posted 11 Jul 2013 Link to this post

    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
  2. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 15 Jul 2013 Link to this post

    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 >>
  3. DevCraft banner
  4. Willem
    Willem avatar
    12 posts
    Member since:
    Nov 2012

    Posted 15 Jul 2013 Link to this post

    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
  5. Willem
    Willem avatar
    12 posts
    Member since:
    Nov 2012

    Posted 18 Jul 2013 Link to this post

    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
Back to Top