Single 100% stacked bar

4 posts, 1 answers
  1. Goran
    Goran avatar
    77 posts
    Member since:
    Feb 2011

    Posted 15 Aug 2012 Link to this post

    Hi,

    I am having a requirement to make something like stacked bar. Visually it should do this:

    - bar should have approx 20 pixels height
    - it should be horizontal
    - it should behave like with CombineMode="Stack100 - meaning that total of all items value is 100% - bar occupies always the whole width available.
    - each "slice" on the bar should be of predefined colors
     - there can be 5 types of slices (colors), but there can be many appearance of one type

    Lets assume that We have next entity

    public class ChartEntity
    {
        public EntityType Type {get;set;}
        public string Value {get;set;}
    }

    and there is some data

    List<ChartEntity> list = new ChartEntityList();
    list.Add(new ChartEntity { Type = EntityType.TypeA, Value = 25 } );
    list.Add(new ChartEntity { Type = EntityType.TypeB, Value = 35 } );
    list.Add(new ChartEntity { Type = EntityType.TypeC, Value = 15 } );
    list.Add(new ChartEntity { Type = EntityType.TypeA, Value = 9 } );
    list.Add(new ChartEntity { Type = EntityType.TypeD, Value = 22 } );
    list.Add(new ChartEntity { Type = EntityType.TypeE, Value = 37 } );
    list.Add(new ChartEntity { Type = EntityType.TypeB, Value = 19 } );
    list.Add(new ChartEntity { Type = EntityType.TypeC, Value = 5 } );

    And lets define colors:

    EntityType.TypeA = Yellow
    EntityType.TypeB = Green
    EntityType.TypeC = Blue
    EntityType.TypeD = Red
    EntityType.TypeE = Orange

    Sine the total value is 25+35+15+9+22+37+19+5=167, the output should be something like this:

    25/167 Yellow, 35/167 Green, 15/167 Blue, 9/167 Yellow, 22/167 Red, 37/167 Orange, 19/167 Green, 5/167 Blue

    I dont need any legends, axes, or anything extra, all I need is horizontal bar. Is ChartView the way to go here. or there is a better control for this?

    Regards,
    Goran
  2. Nikolay
    Admin
    Nikolay avatar
    386 posts

    Posted 20 Aug 2012 Link to this post

    Hello Goran,

    Yes, ChartView is perfectly capable for visualizing the described scenario. The bar height can be adjusted by setting Width and Height values for the whole chart, in order to have a horizontal stacked bar you'd have to define your horizontal axis to be the linear one and the vertical axis - categorical. Since you do not need to display them you can set their visibility properties to collapsed. As you have already mentioned the CombineMode property should be "Stack100" and the colors of each bar can be defined either by using one of the predefined palettes or manually creating a palette in case neither of the default ones is acceptable for the desired scenario.

    Your chart definition could look something like this :
    <telerik:RadCartesianChart x:Name="RadCartesianChart" Palette="Metro" Width="400" Height="50">
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:LinearAxis Visibility="Collapsed"/>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:CategoricalAxis Visibility="Collapsed" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Series>
                    <telerik:BarSeries CombineMode="Stack100">
                        <telerik:BarSeries.DataPoints>
                            <telerik:CategoricalDataPoint Category="Type1" Value="10" />
                        </telerik:BarSeries.DataPoints>
                    </telerik:BarSeries>
                    <telerik:BarSeries CombineMode="Stack100">
                        <telerik:BarSeries.DataPoints>
                            <telerik:CategoricalDataPoint Category="Type1" Value="20" />
                        </telerik:BarSeries.DataPoints>
                    </telerik:BarSeries>
                    <telerik:BarSeries CombineMode="Stack100">
                        <telerik:BarSeries.DataPoints>
                            <telerik:CategoricalDataPoint Category="Type1" Value="15" />
                        </telerik:BarSeries.DataPoints>
                    </telerik:BarSeries>
                    <telerik:BarSeries CombineMode="Stack100">
                        <telerik:BarSeries.DataPoints>
                            <telerik:CategoricalDataPoint Category="Type1" Value="13" />
                        </telerik:BarSeries.DataPoints>
                    </telerik:BarSeries>
                    <telerik:BarSeries CombineMode="Stack100">
                        <telerik:BarSeries.DataPoints>
                            <telerik:CategoricalDataPoint Category="Type1" Value="25" />
                        </telerik:BarSeries.DataPoints>
                    </telerik:BarSeries>
                </telerik:RadCartesianChart.Series>
            </telerik:RadCartesianChart>

    Alternatively, you could also use our RadDataBar ( RadStacked100DataBar ) control to achieve similar results, it is much simpler than ChartView and is designed for scenarios, where the presentation should be as simple as possible. You can find more information in this help topic, as well as in our online demos.

    All the best,
    Nikolay
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Goran
    Goran avatar
    77 posts
    Member since:
    Feb 2011

    Posted 20 Aug 2012 Link to this post

    Hi Nikolay,

    I have seen similar example in online help, but it did not help me, since it is using data entered in xaml, which in most situations is not the way to go. Here is what I have tried, and failed:

    <telerik:RadCartesianChart Palette="Metro" Height="50">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis Visibility="Collapsed" />
        </telerik:RadCartesianChart.HorizontalAxis>
     
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:CategoricalAxis Visibility="Collapsed" />
        </telerik:RadCartesianChart.VerticalAxis>
     
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries ItemsSource="{Binding List, Source={StaticResource viewModel}}"
                   ValueBinding="Value"
                   CategoryBinding="Label"
                   CombineMode="Stack100"
                   PointTemplateSelector="{StaticResource pointTemplateSelector}" />
        </telerik:RadCartesianChart.Series>
    </telerik:RadCartesianChart>

    Template selector is just selecting between predefined templates. Example:
    <DataTemplate x:Key="greenBar">
        <Rectangle Fill="{StaticResource GreenColor}" />
    </DataTemplate>

    Here are the problems I have encountered, for which I have asked the question:

    1) bars are horizontal, but not stacked (I get 4 horizontal bars, for example)
    2) If Items collection is containing 10 items (with 4 different types in it, it will still show only 4 bars (remember that I have 5 different types, but can be many instances of them, as in above example). It seems that it is showing the "grouped" results, not "per instance".

    Thanks for the information about RadStacked100DataBar. I didn't know that it existed. The downside of using RadStacked100DataBar is that it is introducing reference to additional dll (DataVisualization), and I would like to keep the dependency on smallest number of dlls as possible (I am already using RadChartView for other diagrams).

    Regards,
    Goran
  5. Answer
    Nikolay
    Admin
    Nikolay avatar
    386 posts

    Posted 23 Aug 2012 Link to this post

    Hi Goran,

    The most likely reason for the issues you've encountered is that you seem to be creating a single BarSeries, whereas you would need to create 5 for the described scenario, each with CombineMode = "Stack100", just as in our online demo example ( it's the same for SL & WPF ). In case the issue persists, could you please open a support ticket and send us a sample test application,so that we could debug it locally, update and send it back to you.

    Kind regards,
    Nikolay
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top