AreaSeries stacked does not display correctly

5 posts, 0 answers
  1. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 28 Oct 2015 Link to this post

    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

     

     

  2. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 28 Oct 2015 Link to this post

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

    1. Using different area series types (stepped and spline) - Same behavior
    2. Defining separate view model objects that get created from the domain objects so all properties are set prior to binding - Same behavior
    3. 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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 02 Nov 2015 Link to this post

    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
  5. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 03 Nov 2015 in reply to Petar Marchev Link to this post

    Thanks Petar,

     I will look into your solution and see if I missed something on my side or whether I can reproduce the behaviour in yours. As I have a work around implemented this will be on the back burner.

     Regards

    Renier

  6. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 04 Nov 2015 Link to this post

    Hi Renier,

    Let us know of your new findings whenever you find the time for this.

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready