ScatterLineSeries not rendering correctly with large dataset

4 posts, 0 answers
  1. Charlie
    Charlie avatar
    13 posts
    Member since:
    Apr 2013

    Posted 31 May 2013 Link to this post

    I am using the following code to render a ScatterLineSeries. The chart renders with points that do not represent real data. Up until 250 inches there is no data with a negative value, which the chart shows. Zooming into the chart, it can clearly be seen to render all values positive.

    My data is an array of System.Drawing.Point(double, double), with x values at increments of 0.625 and Y values ranging from -3.5 to 3.5.

            <telerik:RadCartesianChart x:Name="uxChart">
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartPanAndZoomBehavior />
                </telerik:RadCartesianChart.Behaviors>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:LinearAxis x:Name="horizontalAxis"
                                        Minimum="{Binding XAxisMin}"
                                        Maximum="{Binding XAxisMax}"
                                        Title="{Binding XAxisTitle}" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="verticalAxis"
                                        Minimum="{Binding YAxisMin}"
                                        Maximum="{Binding YAxisMax}"
                                        Title="{Binding YAxisTitle}" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Series>
                    <telerik:ScatterLineSeries ItemsSource="{Binding Data}"
                                               XValueBinding="X"
                                               YValueBinding="Y" />
                </telerik:RadCartesianChart.Series>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                </telerik:RadCartesianChart.Grid>
            </telerik:RadCartesianChart>
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 05 Jun 2013 Link to this post

    Hi Charlie,

    This visualization "artifact" is caused by the default rendering setting of PolyLines in WPF (StrokeLineJoin=Miter). You can adjust this property like this:
    <telerik:ScatterLineSeries>
        <telerik:ScatterLineSeries.StrokeShapeStyle>
            <Style TargetType="Path">
                <Setter Property="StrokeThickness" Value="2"/>
                <Setter Property="StrokeLineJoin" Value="Round"/>
            </Style>
        </telerik:ScatterLineSeries.StrokeShapeStyle>
    </telerik:ScatterLineSeries>
    I have attached screenshots that illustrate the different modes. 
     
    Regards,
    Petar Kirov
    Telerik

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Charlie
    Charlie avatar
    13 posts
    Member since:
    Apr 2013

    Posted 05 Jun 2013 Link to this post

    When specifying any options for StrokeShapeStyle, all points inthe graph disappear. I am using the following code:

            <telerik:RadCartesianChart x:Name="uxChart">
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartPanAndZoomBehavior />
                </telerik:RadCartesianChart.Behaviors>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:LinearAxis x:Name="horizontalAxis"
                                        Minimum="{Binding XAxisMin}"
                                        Maximum="{Binding XAxisMax}"
                                        Title="{Binding XAxisTitle}" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="verticalAxis"
                                        Minimum="{Binding YAxisMin}"
                                        Maximum="{Binding YAxisMax}"
                                        Title="{Binding YAxisTitle}" />
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Series>
                    <telerik:ScatterLineSeries ItemsSource="{Binding Data}"
                                               XValueBinding="X"
                                               YValueBinding="Y">
                        <telerik:ScatterLineSeries.StrokeShapeStyle>
                            <Style TargetType="Path">
                                <Setter Property="StrokeThickness"
                                        Value="2" />
                                <Setter Property="StrokeLineJoin"
                                        Value="Round" />
                            </Style>
                        </telerik:ScatterLineSeries.StrokeShapeStyle>
                    </telerik:ScatterLineSeries>
                </telerik:RadCartesianChart.Series>
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                </telerik:RadCartesianChart.Grid>
            </telerik:RadCartesianChart>
  5. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 07 Jun 2013 Link to this post

    Hi Charlie,

    The default StrokeShapeStyle contains the default color (Stroke) of the series. By specifying a custom one, you overriding the default and the Path is left without a color. 

    You need to either set the Stroke of the Path, or set a chart palette like this:
    <telerik:RadCartesianChart x:Name="chart" Palette="Windows8"/>

     

    Regards,
    Petar Kirov
    Telerik

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top