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

Replacing LineSeries with AreaSeries

2 Answers 110 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Deepak
Top achievements
Rank 1
Deepak asked on 01 Sep 2016, 07:27 PM

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 Answers, 1 is accepted

Sort by
0
Deepak
Top achievements
Rank 1
answered on 02 Sep 2016, 01:58 PM

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.

0
Martin Ivanov
Telerik team
answered on 05 Sep 2016, 11:21 AM
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.
Tags
Chart
Asked by
Deepak
Top achievements
Rank 1
Answers by
Deepak
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or