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

AreaSeries stacked does not display correctly

4 Answers 168 Views

ChartView

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

Renier Pretorius asked on 28 Oct 2015, 12:05 PM

chartviewissue20151028.png

Hi,

I have a chartview that is bound to the same data as a gridview. Each series corresponds to a different column. The usercontrol containing these filter data based on combobox values and then displays the resulting data in the chartview and gridview. For some filter combinations this works perfectly, but for others the chartview does not display correctly. Note on the attached screen capture the "spikes" in the graph and comparing them to the data in the gridview which is fine. As I have mentioned both are bound to the same observable collection in the view model from the same view (user control).

Here is the chartview section:

<telerik:RadCartesianChart x:Name="chartFromPort" Margin="5" >

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTooltipBehavior HorizontalOffset="-6" VerticalOffset="-49" />

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.TooltipTemplate>

<DataTemplate>

<Grid>

<Path Data="M-1236,-441 L-1180,-441 -1180,-424 -1228,-424 -1230.5,-420 -1233,-424 -1236,-424 z"

Stretch="Fill" Fill="White" Stroke="Gray" StrokeThickness="1" />

<TextBlock Text="{Binding Value, StringFormat='N0'}" Margin="4,3,4,9" FontFamily="Segoe UI" />

</Grid>

</DataTemplate>

</telerik:RadCartesianChart.TooltipTemplate>

<telerik:RadCartesianChart.Resources>

<DataTemplate x:Key="StrategyTemplate">

<Ellipse Height="10" Width="10" Fill="Red" />

</DataTemplate>

<DataTemplate x:Key="TrafficFileTemplate">

<Ellipse Height="10" Width="10" Fill="Blue" />

</DataTemplate>

</telerik:RadCartesianChart.Resources>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis LabelFitMode="Rotate" LabelRotationAngle="270" PlotMode="BetweenTicks" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis Minimum="0" >

<telerik:LinearAxis.LabelTemplate>

<DataTemplate>

<TextBlock Text="{Binding Converter={StaticResource LabelFormatConverter}}"/>

</DataTemplate>

</telerik:LinearAxis.LabelTemplate>

</telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.Series>

<telerik:AreaSeries ItemsSource="{Binding MarketShareVolumesFromPort}"

CategoryBinding="Year"

ValueBinding="RailPotential"

CombineMode="Stack"

>

<telerik:AreaSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="Rail Potential" />

</telerik:AreaSeries.LegendSettings>

<telerik:AreaSeries.AreaShapeStyle>

<Style TargetType="Path">

<Setter Property="Fill" Value="#FFC3D69B"/>

</Style>

</telerik:AreaSeries.AreaShapeStyle>

</telerik:AreaSeries>

<telerik:AreaSeries ItemsSource="{Binding MarketShareVolumesFromPort}"

CategoryBinding="Year"

ValueBinding="Competitive"

CombineMode="Stack"

>

<telerik:AreaSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="Competitive Potential" />

</telerik:AreaSeries.LegendSettings>

<telerik:AreaSeries.AreaShapeStyle>

<Style TargetType="Path">

<Setter Property="Fill" Value="#FFFFC000"/>

</Style>

</telerik:AreaSeries.AreaShapeStyle>

</telerik:AreaSeries>

<telerik:AreaSeries ItemsSource="{Binding MarketShareVolumesFromPort}"

CategoryBinding="Year"

ValueBinding="RoadFriendly"

CombineMode="Stack"

>

<telerik:AreaSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="Road Potential" />

</telerik:AreaSeries.LegendSettings>

<telerik:AreaSeries.AreaShapeStyle>

<Style TargetType="Path">

<Setter Property="Fill" Value="#FFE6B9B8"/>

</Style>

</telerik:AreaSeries.AreaShapeStyle>

</telerik:AreaSeries>

<telerik:AreaSeries ItemsSource="{Binding MarketShareVolumesFromPort}"

CategoryBinding="Year"

ValueBinding="SmallParcelLimit"

CombineMode="Stack"

>

<telerik:AreaSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="Small Parcels" />

</telerik:AreaSeries.LegendSettings>

<telerik:AreaSeries.AreaShapeStyle>

<Style TargetType="Path">

<Setter Property="Fill" Value="#FF8EB4E3"/>

</Style>

</telerik:AreaSeries.AreaShapeStyle>

</telerik:AreaSeries>

<telerik:LineSeries ItemsSource="{Binding MarketShareVolumesFromPort}"

CategoryBinding="Year"

ValueBinding="RailStrategy"

CombineMode="None"

PointTemplate="{StaticResource StrategyTemplate}"

>

<telerik:LineSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="Rail Strategy" MarkerGeometry="{StaticResource EllipseGeometry1}" />

</telerik:LineSeries.LegendSettings>

<telerik:LineSeries.StrokeShapeStyle>

<Style TargetType="Path">

<Setter Property="Stroke" Value="Red"/>

<Setter Property="StrokeThickness" Value="2"/>

</Style>

</telerik:LineSeries.StrokeShapeStyle>

</telerik:LineSeries>

<telerik:LineSeries ItemsSource="{Binding MarketShareVolumesFromPort}"

CategoryBinding="Year"

ValueBinding="PlannedRail"

CombineMode="None"

PointTemplate="{StaticResource TrafficFileTemplate}"

>

<telerik:LineSeries.LegendSettings>

<telerik:SeriesLegendSettings Title="TrafficFile" MarkerGeometry="{StaticResource EllipseGeometry1}" />

</telerik:LineSeries.LegendSettings>

<telerik:LineSeries.StrokeShapeStyle>

<Style TargetType="Path">

<Setter Property="Stroke" Value="Blue"/>

<Setter Property="StrokeThickness" Value="2"/>

</Style>

</telerik:LineSeries.StrokeShapeStyle>

</telerik:LineSeries>

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

And here is the gridview section:

<telerik:RadGridView Margin="5"

RowIndicatorVisibility="Collapsed"

AutoGenerateColumns="False"

ShowGroupPanel="False"

ItemsSource="{Binding MarketShareVolumesFromPort}"

>

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn Header="Year"

DataMemberBinding="{Binding Year}"

Width="60"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

HeaderTextAlignment="Center"

/>

<telerik:GridViewDataColumn Header="Small Parcels"

DataMemberBinding="{Binding SmallParcelLimit}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Road Potential"

DataMemberBinding="{Binding RoadFriendly}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Competitive Potential"

DataMemberBinding="{Binding Competitive}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Rail Potential"

DataMemberBinding="{Binding RailPotential}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Total Potential"

DataMemberBinding="{Binding TotalPotential}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Rail Strategy"

DataMemberBinding="{Binding RailStrategy}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Traffic File"

DataMemberBinding="{Binding PlannedRail}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

<telerik:GridViewDataColumn Header="Rail Addressable"

DataMemberBinding="{Binding RoadPotential}"

Width="100"

IsFilterable="False"

IsSortable="False"

IsReadOnly="True"

DataFormatString="N2"

HeaderTextAlignment="Center"

TextAlignment="Right"

/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

The business objects in the collection has the following definition:

[Table("MarketShareDataVolumes")]

public partial class MarketShareDataVolume

{

[Key]

[DatabaseGenerated(DatabaseGeneratedOption.None)]

public int MarketShareDataVolumeId { get; set; }

public int MarketShareDataPointId { get; set; }

public virtual MarketShareDataPoint MarketShareDataPoint { get; set; }

public byte YearIndex { get; set; }

public double? RailPotential { get; set; }

public double? RoadPotential { get; set; }

public double? NoLimit { get; set; }

public double? SmallParcelLimit { get; set; }

public double? PlannedRail { get; set; }

public double? RailStrategy { get; set; }

[NotMapped]

public short? Year { get; private set; }

[NotMapped]

public double Competitive { get; private set; }

[NotMapped]

public double RoadFriendly { get; private set; }

[NotMapped]

public double TotalPotential { get; private set; }

public void Initialise()

{

if (MarketShareDataPoint != null) Year = (short)(MarketShareDataPoint.MarketShareDataSet.BaseYear + YearIndex);

Competitive = (RoadPotential ?? 0) - (RailPotential ?? 0);

RoadFriendly = (NoLimit ?? 0) - (RoadPotential ?? 0);

TotalPotential = (NoLimit ?? 0) + (SmallParcelLimit ?? 0);

}

Initialise gets called on each object before it is added to the observable collection.

I would greatly appreciate any urgent assistance

Regards

Renier

4 Answers, 1 is accepted

answered on 29 Oct 2015, 02:36 AM

This seems to be a rendering issue with stacked area series. I have tried the following:

Using different area series types (stepped and spline) - Same behavior
Defining separate view model objects that get created from the domain objects so all properties are set prior to binding - Same behavior
Changed combine mode to cluster and calculate required "combined level" values in view model object - EUREKA!! graph rendered as expected.

There must however still be some link to the specific data as it produced the same result on the same data set on different machines, but different data it displayed correctly for the stack scenario.

answered on 02 Nov 2015, 09:44 AM

StackedAreas.png

wpf-ChartView-982718.zip

Hi Renier ,

I created a small project based on the code you provided. It did not reproduce the behavior you are observing. I am attaching it to this post. You can check it out and see the differences with your actual project. You can modify the project and send it back to us so that it reproduces the output you get, so that we can investigate and look for solutions.

We understand that modifying your view models in order to mimic the stacked area behavior is pretty unpleasant and this is why we will do our best to assist you to resolve this issue in a more straight-forward way.

Regards,
Petar Marchev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items