horizontal stack barseries

[Chris]

I am trying to generate a Horizontal stack bar that has approximately five different color coded "events". I would like to display a horizontal stack that shows what event was present, with respect to time. I am very new to this (sense yesterday) and am having trouble navigating to the correct approach. I would like to dynamically generate the events that are presented in the chart. Currently I have the following XAML:

 

<telerik:RadCartesianChart x:Name="radChartAction" Palette="Windows8" Margin="0,151,552.2,-0.2">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries CombineMode="Stack">
<telerik:BarSeries.DataPoints>
<telerik:CategoricalDataPoint Category="January" Value="5"/>
</telerik:BarSeries.DataPoints>
</telerik:BarSeries>
<telerik:BarSeries CombineMode="Stack">
<telerik:BarSeries.DataPoints>
<telerik:CategoricalDataPoint Category="January" Value="7"/>
</telerik:BarSeries.DataPoints>
</telerik:BarSeries>
<telerik:BarSeries CombineMode="Stack">
<telerik:BarSeries.DataPoints>
<telerik:CategoricalDataPoint Category="January" Value="20"/>
</telerik:BarSeries.DataPoints>
</telerik:BarSeries>
</telerik:RadCartesianChart.Series>

 

When I attempt to add an additional bar series using the following code behind it appears to have not effect. NOTE: when I Changed stacked to cluster in the code behind the graph shifts down as if to make room for the new series object. However, there is still nothing visible with regard to the programmatically generated bar series.

BarSeries ser = new BarSeries();
ser.Visibility = System.Windows.Visibility.Visible;
ser.CombineMode = Telerik.Charting.ChartSeriesCombineMode.Stack;
//ser.CombineMode = Telerik.Charting.ChartSeriesCombineMode.Cluster;
ser.ValueBinding = new PropertyNameDataPointBinding("50");
ser.CategoryBinding = new PropertyNameDataPointBinding("January");

 

 

I would like to also be able to have control over the color for the dynamically generated events. so all of event 1 is color coordinated.

Thanks

[Tanya]

Hi Chris,

To create dynamically RadChartView, I would suggest you take a look at the Create Data-Bound Chart help article. The article describes the ValueBinding and CategoryBinding properties as well. These properties should be used only in data binding scenarios and should point to a property included in the view model. From the code you provided, I noticed that both properties are pointing to values and not to property names. This is why, when the additional series is added, the chart allocates the slot for this series, but is unable to find the property with its value and the point is left without value.

For generation of the series of the chart, you can use the ChartSeriesProvider. With this approach, you can directly work with a collection from your view model and leave the generation of the series to the provider.

The color of the series can be customized using the DefaultVisualStyle and DefaultVisualStyleSelector properties of the series. More information on how to work with them you can find in the Customizing CartesianChart Series topic and the SDK example showing their usage. You can also use a property from the view model to bind the color of the series items.
 
On a side note, I would like to mention that I noticed some outdated code snippets in the last article I linked. They are making use of PointTemplate to modify the style of a point. Since the DefaultVisualStyle provides better performance of RadChartView, we are recommending to use it instead PointTemplate. More details on the concerns about that are available in this blog post.

I hope this is helpful.

Regards,
Tanya
Telerik by Progress