Replacing LineSeries with AreaSeries

3 posts, 0 answers
  1. Deepak
    Deepak avatar
    2 posts
    Member since:
    Sep 2016

    Posted 01 Sep Link to this post

    I had a RadCartesianChart control with a LineSeries within, which amtrying to replace with an AreaSeries. And following is the new code I have:

    <telerik:RadCartesianChart Name="outputChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY">
                        <telerik:CartesianChartGrid.MajorXLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Shape.Stroke" Value="{StaticResource gridLineColor}" />
                            </Style>
                        </telerik:CartesianChartGrid.MajorXLineStyle>
                        <telerik:CartesianChartGrid.MajorYLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Shape.Stroke" Value="{StaticResource gridLineColor}" />
                            </Style>
                        </telerik:CartesianChartGrid.MajorYLineStyle>
                    </telerik:CartesianChartGrid>
                </telerik:RadCartesianChart.Grid>
     
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeContinuousAxis
                        Name="horizontalAxis"
                        HorizontalAlignment="Center"
                        HorizontalContentAlignment="Center"
                        ElementBrush="LightGray"
                        PlotMode="OnTicks"
                        LabelInterval="2"
                        LabelStyle="{StaticResource XAxisLabelStyle}"
                        MajorStepUnit="Minute"
                        FontSize="12"
                        Foreground="{StaticResource textForeground}"
                        LabelFormat="h:mm tt"
                        LineThickness="0"
                        Minimum="{Binding StartTime}"
                        Maximum="{Binding EndTime}"
                        MajorStep="{Binding HorizontalMajorStep}" />
                </telerik:RadCartesianChart.HorizontalAxis>
     
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis
                        Name="verticalAxis"
                        Title="{x:Static resources:Strings.VerticalAxisTitle}"
                        ElementBrush="LightGray"
                        Minimum="0"
                        Maximum="{Binding VerticalMax}"
                        LineThickness="0"
                        MajorStep="{Binding VerticalMajorStep}" />
                </telerik:RadCartesianChart.VerticalAxis>
     
                <telerik:RadCartesianChart.Series>
                    <telerik:AreaSeries
                    Name="combinedSeries"
                    ItemsSource="{Binding ChartPoints}"
                    ValueBinding="Combined"
                    CategoryBinding="CalculationTime"
                    StrokeThickness="2"
                    Stroke="{StaticResource StrokeColor}"
                    ClipToPlotArea="False"
                    Visibility="{Binding ThroughputVisibility}">
                        <telerik:AreaSeries.AreaShapeStyle>
                            <Style TargetType="Path">
                                <Setter Property="Fill" Value="{StaticResource StrokeColor}" />
                                <Setter Property="Opacity" Value="0.2" />
                            </Style>
                        </telerik:AreaSeries.AreaShapeStyle>
                    </telerik:AreaSeries>
                </telerik:RadCartesianChart.Series>
     
                <telerik:RadCartesianChart.Annotations>
                    <telerik:CartesianGridLineAnnotation
                        Name="combinedWarningLevelAnnotation"
                        Axis="{Binding ElementName=verticalAxis}"
                        Value="{Binding CombinedThroughputWarningLevel}"
                        Label="{Binding CombinedThroughputWarningLevel}"
                        Foreground="{StaticResource textForeground}"
                        FontSize="9"
                        Visibility="{Binding CombinedThroughputVisibility}"
                        StrokeThickness="1"
                        Stroke="{StaticResource combinedThroughputColor}" />
                </telerik:RadCartesianChart.Annotations>
            </telerik:RadCartesianChart>

     The vertical bound for the chart is dynamically bound to VerticalMax which is calculated at each time step after determining if any data value being plotted is above the current vertical limit. This logic was working perfectly well with LineSeries and the moment I replaced it with AreaSeries, the graph lines started going outside the vertical limits (i.e below 0 and above vertical max of the chart). There has been no change in the data being fed in whatsoever. Is there anything else I should be doing while using AreaSeries?

  2. Deepak
    Deepak avatar
    2 posts
    Member since:
    Sep 2016

    Posted 02 Sep in reply to Deepak Link to this post

    Sorry but I forgot to attach the values being rendered and the output graph. PFA. So the graph is being redrawn every 2 seconds in this instance.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 05 Sep Link to this post

    Hi Deepak,

    Without your implementation I cannot be sure why this happens, However, it seems that the described behavior comes from the Stroke of the area. The stroke is not respected when the area is positioned in the plot area and this is why the stroked part could be clipped or drawn outside of the chart in some cases. For example, the value "5968" is very close to the Maximum of the vertical axis. The area is drawn properly but the stroke goes a bit above the maximum. To resolve this you can remove the Maximum property setter and leave the chart to calculate the maximum automatically. Or you can manually set a bit bigger Maximum.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top