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

Single 100% stacked bar

3 Answers 218 Views

ChartView

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

Goran asked on 16 Aug 2012, 01:40 AM

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

3 Answers, 1 is accepted

answered on 20 Aug 2012, 10:12 AM

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" />