Stacked bar charts for RadCartesianChart for 2012.1.326.40

5 posts, 0 answers
  1. syed
    syed avatar
    5 posts
    Member since:
    Feb 2008

    Posted 26 Nov 2016 Link to this post

    Hi,

    I am trying to build a stacked bar chart in wof 4.0 using telerik version 2012.1.326.40.

    I am able to do so by using telerik:RadCartesianChart.SeriesProvider in 4.5 but as the SeriesProvider is absent in the earlier version it is hard for me to construct the same.

    I am trying to achieve a chart attached.

    Please advise.

  2. Dinko
    Admin
    Dinko avatar
    395 posts

    Posted 01 Dec 2016 Link to this post

    Hello Syed Masood,

    As the SeriesProvider doesn't exist in the mentioned version of our controls you can specify several BarSeries in XAML and use the CombineMode property of the BarSeries. You can set it to Stack for example in order to stack the bars as shown in the attached picture.

    For your convenience, we have created sample project which demonstrates this approach.

    As a side note, you can consider upgrading to the latest version of our Telerik UI for WPF controls where you can take advantage of the SeriesProvider property and many other features.

    Regards,
    Dinko
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
  3. syed
    syed avatar
    5 posts
    Member since:
    Feb 2008

    Posted 08 Dec 2016 in reply to Dinko Link to this post

    Thanks for the reply.

    I will definitely try to convince my client for an upgrade but for time being I need to complete this.

    According to your code I did but unable to recreate the ideal solution.

    Here Is the code,

    <telerik:RadCartesianChart x:Name="RadCartesianChart" Palette="Metro" >
     
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis  />
                </telerik:RadCartesianChart.HorizontalAxis>
     
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis />
                </telerik:RadCartesianChart.VerticalAxis>
     
                <telerik:RadCartesianChart.Series>
                    <telerik:BarSeries CombineMode="Stack" ItemsSource="{Binding ChartElem}" CategoryBinding="Category" ValueBinding="Count" >
                         
                    </telerik:BarSeries>
                </telerik:RadCartesianChart.Series>
            </telerik:RadCartesianChart>

     

    And the data

     

    ChartElem = new ObservableCollection<ChartElements>();
               ChartElem.Add(new ChartElements { Category = "KIT", Count = 4 });
               ChartElem.Add(new ChartElements { Category = "KIT", Count = 2 });
               ChartElem.Add(new ChartElements { Category = "SLEEPER SUIT", Count = 2 });
               ChartElem.Add(new ChartElements { Category = "SLEEPER SUIT", Count = 5 });
               ChartElem.Add(new ChartElements { Category = "SLEEPER SUIT", Count = 1 });

     

    I am not able to recreate stack.

  4. Dinko
    Admin
    Dinko avatar
    395 posts

    Posted 13 Dec 2016 Link to this post

    Hi syed,

    You can create two (or more) collections with different data and populate them in the ViewModel class. Then you create two BarSeries series and bind them to these collections and set the CombineMode property of the both to Stack. Check the attached project.

    Regards,
    Dinko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. dec698
    dec698 avatar
    1 posts
    Member since:
    May 2010

    Posted 09 Feb Link to this post

    Hi Syed, how do you achieve the same in code? (not xaml)
Back to Top