why spline series show scatter line

10 posts, 1 answers
  1. Steve
    Steve avatar
    7 posts
    Member since:
    Dec 2013

    Posted 01 Apr Link to this post

    How come when I changed my chart from scatter line series to spline series, the graph is still show as scatter line?  Is there any special thing with horizontal axis?  With the scatter line series, both horizontal axis and vertical axis are LinearAxis.  When I change to Spline series, I must change to CategoricalAxis, otherwise the graph will not show.

    Thanks,

    Steve

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 01 Apr Link to this post

    Hi Steve,

    Without your implementation and plotted data I cannot be sure what is causing this. Can you please send me code snippets that can be assembled into a runnable project? This will allow me to test your case locally and investigate what is causing the reported behavior.

    In the meantime you can double check the logic for changing the chart series and make sure that you are using collection that implements the INotifyCollectionChanged interface (ex: ObservableCollection<T>). This way the UI will listen in changes in the collection.

    Just for your information, there was a forum that duplicates this one it was deleted.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Steve
    Steve avatar
    7 posts
    Member since:
    Dec 2013

    Posted 01 Apr Link to this post

    My chart object utilize multiple styles so that it can toggle (see attached file).  The scatter line is showing ok, but when I toggle to spline series, the graph will not show, unless I change the horizontal axis to Categorical axis; even after I changed it, but the graph is still show the scatter line.

    Here is the graph.xaml (I'm sorry, the forum doesn't allow zip file as attachment)

    <UserControl x:Class="PlotManager.View.Chart"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
                 xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
                 xmlns:PlotModel="clr-namespace:PlotManager.ViewModel"
                 xmlns:local="clr-namespace:PlotManager.View"
                 mc:Ignorable="d"
                 d:DesignHeight="300" d:DesignWidth="300">

        <UserControl.DataContext>
            <PlotModel:ChartViewModel/>
        </UserControl.DataContext>

        <!--<UserControl.Resources>
            <Style TargetType="telerik:RadLegend" BasedOn="{StaticResource RadLegendStyle}">
                <Setter Property="Margin" Value="10,6,10,0" />
                <Setter Property="Foreground" Value="#FF767676" />
                <Setter Property="MinWidth" Value="75" />
                <Setter Property="FontFamily" Value="Segoe UI" />
                <Setter Property="FontSize" Value="11" />
            </Style>
        </UserControl.Resources>-->
        
        <UserControl.Resources>
            <local:SeriesSelectorUtility x:Key="DescriptorSelector">
                <local:SeriesSelectorUtility.BarDescriptor>
                    <telerik:CategoricalSeriesDescriptor ValuePath="YValue" CategoryPath="XValue" ItemsSourcePath="DataPoints" TypePath="SeriesType"/>
                </local:SeriesSelectorUtility.BarDescriptor>
                <local:SeriesSelectorUtility.LineDescriptor>
                    <telerik:CategoricalSeriesDescriptor ValuePath="YValue" CategoryPath="XValue" ItemsSourcePath="DataPoints" TypePath="SeriesType"/>
                </local:SeriesSelectorUtility.LineDescriptor>
                <local:SeriesSelectorUtility.LineDescriptor_DateTime>
                    <telerik:CategoricalSeriesDescriptor ValuePath="YValue" CategoryPath="XDate" ItemsSourcePath="DataPoints" TypePath="SeriesType"/>
                </local:SeriesSelectorUtility.LineDescriptor_DateTime>
                <local:SeriesSelectorUtility.ScatterLineDescriptor>
                    <telerik:ScatterSeriesDescriptor YValuePath="YValue" XValuePath="XValue" ItemsSourcePath="DataPoints" TypePath="SeriesType"/>
                </local:SeriesSelectorUtility.ScatterLineDescriptor>
                <local:SeriesSelectorUtility.LineDescriptor_Device>
                    <telerik:CategoricalSeriesDescriptor ValuePath="YValue" CategoryPath="XDevice" ItemsSourcePath="DataPoints" TypePath="SeriesType"/>
                </local:SeriesSelectorUtility.LineDescriptor_Device>
                <local:SeriesSelectorUtility.SplineDescriptor>
                    <telerik:CategoricalSeriesDescriptor ValuePath="YValue" CategoryPath="XDevice" ItemsSourcePath="DataPoints" TypePath="SeriesType"/>
                </local:SeriesSelectorUtility.SplineDescriptor>
            </local:SeriesSelectorUtility>
        </UserControl.Resources>

        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
       
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            
    <!--     
            <Border BorderBrush="LightBlue" CornerRadius="5" BorderThickness="2">
                <TextBlock Grid.Row="0" Text="{Binding ChartTitle}"
                   HorizontalAlignment="Center" />
            </Border>
            <TextBox BorderBrush="LightBlue" BorderThickness="2" Height="Auto" Grid.Row="0" Text="{Binding ChartTitle}"
                   HorizontalAlignment="Center" />        
    -->
            
            <!--StackPanel Grid.Row="0" Width="Auto">

                    <telerik:RadToolBar Width="200" HorizontalAlignment="Left">
                    <telerik:RadRibbonButton Text="Crosshair" telerik:KeyTipService.AccessText="1" />
                    <telerik:RadRibbonButton Text="Cursor" telerik:KeyTipService.AccessText="2" />            
                    <telerik:RadRibbonButton Text="Legend" telerik:KeyTipService.AccessText="3" />
                    </telerik:RadToolBar>

                    <TextBlock Grid.Row="0" Text="{Binding ChartTitle}"
                   HorizontalAlignment="Center" />

            </StackPanel-->

            <chart:RadCartesianChart Name="RadChart" Grid.Row="1" Palette="{Binding Palette}" MouseLeftButtonDown="RadChart_MouseLeftButtonDown" MouseLeftButtonUp="RadChart_MouseLeftButtonUp" HorizontalAxis="{Binding HorizontalAxis}"> <!--MouseRightButtonDown="Chart_MouseRightButtonDown"-->
                <chart:RadCartesianChart.Resources>
                    <DataTemplate x:Key="PointDataTemplate">
                        <Ellipse Height="6" Width="6" Fill="#FF8EC441" />
                    </DataTemplate>
                    <Style TargetType="telerik:LineSeries">
                        <!--<Setter Property="StrokeThickness" Value="2"/>-->
                        <!--<Setter Property="Stroke" Value="Blue" />-->
                        <Setter Property="LegendSettings">
                            <Setter.Value>
                                <telerik:SeriesLegendSettings Title="{Binding SeriesName, TargetNullValue=null, FallbackValue=LegendTest}"/>
                            </Setter.Value>                   
                        </Setter>

                        <Setter Property="TrackBallInfoTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">                         
                                        <TextBlock Foreground="Red">
                                            <TextBlock.Text>
                                                <Binding Path="DataPoint.Category" ConverterParameter="F2">
                                                    <Binding.Converter>
                                                        <PlotModel:DisplayDecPlaces />
                                                    </Binding.Converter>
                                                </Binding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                       
                                        <TextBlock Text=", " />
                                        <TextBlock Foreground="Blue">
                                            <TextBlock.Text>
                                                <Binding Path="DataPoint.Value" ConverterParameter="F3">
                                                </Binding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                        
                    </Style>

                    <Style TargetType="telerik:SplineSeries">
                        <!--<Setter Property="StrokeThickness" Value="2"/>-->
                        <!--<Setter Property="Stroke" Value="Blue" />-->
                        <Setter Property="LegendSettings">
                            <Setter.Value>
                                <telerik:SeriesLegendSettings Title="{Binding SeriesName, TargetNullValue=null, FallbackValue=LegendTest}"/>
                            </Setter.Value>
                        </Setter>

                        <Setter Property="TrackBallInfoTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Foreground="Red">
                                            <TextBlock.Text>
                                                <Binding Path="DataPoint.Category" ConverterParameter="F2">
                                                    <Binding.Converter>
                                                        <PlotModel:DisplayDecPlaces />
                                                    </Binding.Converter>
                                                </Binding>
                                            </TextBlock.Text>
                                        </TextBlock>

                                        <TextBlock Text=", " />
                                        <TextBlock Foreground="Blue">
                                            <TextBlock.Text>
                                                <Binding Path="DataPoint.Value" ConverterParameter="F3">
                                                </Binding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>

                    </Style>

                    <Style TargetType="telerik:BarSeries">
                        <!--<Setter Property="PointTemplate" Value="{StaticResource PointDataTemplate}" />-->
                        <!--<Setter Property="CombineMode" Value="None"/>-->
                        <Setter Property="LegendSettings">
                            <Setter.Value>
                                <telerik:SeriesLegendSettings Title="{Binding SeriesName, TargetNullValue=null, FallbackValue=LegendTest}"/>
                            </Setter.Value>
                        </Setter>

                        <Setter Property="TrackBallInfoTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Foreground="Red">
                                            <TextBlock.Text>
                                                <Binding Path="DataPoint.Category" ConverterParameter="F2">
                                                    <Binding.Converter>
                                                        <PlotModel:DisplayDecPlaces />
                                                    </Binding.Converter>
                                                </Binding>
                                            </TextBlock.Text>
                                        </TextBlock>

                                        <TextBlock Text=", " />
                                        <TextBlock Foreground="Blue">
                                            <TextBlock.Text>
                                                <Binding Path="DataPoint.Value" ConverterParameter="F3">
                                                    <Binding.Converter>
                                                        <PlotModel:DisplayDecPlaces />
                                                    </Binding.Converter>
                                                </Binding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>

                        
                    </Style>

                    <!--//LISAT 28366-Custom Axis - Ticks>-->
                    <Style x:Key="AxisYMinorTickStyle"
           TargetType="Line">
                        <Setter Property="Stroke"
                Value="Orange" />
                    </Style>
                    <Style x:Key="AxisYTickStyle"
           TargetType="Line">
                        <Setter Property="Stroke"
                Value="Orange" />
                    </Style>


                </chart:RadCartesianChart.Resources>

                <chart:RadCartesianChart.ContextMenu>
                        <ContextMenu>
                        <MenuItem Header="Zoom X Axis" IsCheckable="true" IsChecked="{Binding IsCheckedXZoom}"
                                  Command="{Binding ZoomXaxisSel}" />
                        <MenuItem Header="Zoom Y Axis" IsCheckable="true" IsChecked="{Binding IsCheckedYZoom}" Command="{Binding ZoomYaxisSel}" />
                        <MenuItem Header="Pan X Axis" IsCheckable="true" IsChecked="{Binding IsCheckedXPan}" Command="{Binding PanXaxisSel}" />
                        <MenuItem Header="Pan Y Axis" IsCheckable="true" IsChecked="{Binding IsCheckedYPan}" Command="{Binding PanYaxisSel}" />                        
                        <MenuItem Header="Crosshair" IsCheckable="true" Click="Crosshair_Click" />
                        <MenuItem Header="Cursor" IsCheckable="true" Click="Cursor_Click"/>
                        <MenuItem Header="Legend" IsCheckable="true" IsChecked="true" Click="Legend_Click" />
                        <MenuItem Header="Gridlines" IsCheckable="true" IsChecked="true" Click="Gridlines_Click"/>
                        <MenuItem Header="Axis Minor Ticks" IsCheckable="true" IsChecked="true" Click="AxisMajorTick_MenuItem_Click" />
                        <!--<MenuItem Header="Customize Axis" Click="CustomizeAxis_Click"/>-->
                        <MenuItem Header="Add Line" Click="AddLineAnnotation_Click"/>
                        <MenuItem Header="Add Label" Click="AddLabelAnnotation_Click"/>
                    </ContextMenu>
                </chart:RadCartesianChart.ContextMenu>
                
                <!--chart:RadCartesianChart.HorizontalAxis-->
                    <!--telerik:LinearAxis Title="{Binding XAxisTitle}" LastLabelVisibility="Visible" /-->
                    <!--telerik:CategoricalAxis Title="{Binding XAxisTitle}" LastLabelVisibility="Visible" /-->
                <!--/chart:RadCartesianChart.HorizontalAxis-->
                <chart:RadCartesianChart.VerticalAxis>
                    <chartView:LinearAxis Title="{Binding YAxisTitle}" LabelFormat="0.###" LastLabelVisibility="Visible"/>
                </chart:RadCartesianChart.VerticalAxis>

                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                </telerik:RadCartesianChart.Grid>

                <telerik:RadCartesianChart.Behaviors>              
                    <telerik:ChartPanAndZoomBehavior x:Name="panZoomBehav"
                                                     ZoomMode="{Binding ZoomMode}"
                                                     PanMode="{Binding PanMode}"
                                                     />


                    <!--                  
                    <telerik:ChartSelectionBehavior DataPointSelectionMode="Single" />          
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"
                                                    SnapMode="None" >
                                  
                    </telerik:ChartTrackBallBehavior>
                    <telerik:ChartCrosshairBehavior  />
    -->                
                </telerik:RadCartesianChart.Behaviors>

                
                <telerik:RadCartesianChart.SeriesProvider>
                    <telerik:ChartSeriesProvider Source="{Binding SeriesCollection}" SeriesDescriptorSelector="{StaticResource DescriptorSelector}">
                        <telerik:ChartSeriesProvider.SeriesDescriptors>                   
                            
                            <!--telerik:ScatterSeriesDescriptor ItemsSourcePath="DataPoints" YValuePath="YValue" XValuePath="XValue" TypePath="SeriesType"/-->

                            <!--telerik:CategoricalSeriesDescriptor ItemsSourcePath="DataPoints" ValuePath="YValue" CategoryPath="XValue" TypePath="SeriesType"/-->

                            <!--telerik:CategoricalSeriesDescriptor ItemsSourcePath="DataPoints" ValuePath="YValue" CategoryPath="XValue">
                                <telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="telerik:BarSeries">
                                        <Setter Property="CombineMode" Value="None" />
                                    </Style>
                                </telerik:CategoricalSeriesDescriptor.Style>
                            </telerik:CategoricalSeriesDescriptor-->

                        </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>

                </telerik:RadCartesianChart.SeriesProvider>

            </chart:RadCartesianChart>

            <telerik:RadLegend Name="Legend" Grid.Row="1" Grid.Column="1" Items="{Binding LegendItems, ElementName=RadChart}"
                           Background="White"
                           BorderBrush="LightBlue"
                           BorderThickness="0"         
                           />


        </Grid>
        
    </UserControl>

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 05 Apr Link to this post

    Hi Steve,

    The provided code snippet was not enough to reproduce the reported behavior. However, I noticed that you are plotting all series even if the axis is not suitable for some of them. Keep in mind, in this case the axis might draw additional categories or extend its range. So, I recommend you when you change the axis, also to remove the series that won't fit on the set axis from the SeriesCollection. You can also check the properties from view model that are bound to the UI and are reset at runtime, and raise the PropertyChanged event in their setters. This way you will ensure that the changes in the view model will be reflected on the UI.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Steve
    Steve avatar
    7 posts
    Member since:
    Dec 2013

    Posted 06 Apr in reply to Martin Link to this post

    Hi Martin,

    I was able to create a sample which can duplicate the issue.  The original code was able to plot the spline graph without any problem.  When I substituted with my data, then I can see the scatter line graph.  Please see the attached zip file in:

    https://onedrive.live.com/redir?resid=7B1A7E0D2D93B060!6203&authkey=!ADl60uIjkcg6qy4&ithint=file%2czip

     

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 08 Apr Link to this post

    Hello Steve,

    I am not sure what the project demonstrates. Can you please clarify what is the issue and how to reproduce it? Currently, the project changes from spline to point categorical series. If you want to change to scatter series you will need to change the series descriptor and the axes so that they meet the requirements of the series that you want to display. For example if you want to display a ScatterLineSeries you will need to replace the CategoricalAxis with LinearAxis (or LogarithmicAxis) and use ScatterSeriesDescriptor instead of CategoricalSeriesDescriptor.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Steve
    Steve avatar
    7 posts
    Member since:
    Dec 2013

    Posted 08 Apr in reply to Martin Link to this post

    The sample project that I posted was from spline project example that I download from Telerik.  I replace the data with the actual data from our database.  The original data was plot spline chart ok, but as soon as I'm using my data, then it will plot as scatter line.  Just build the project, then copy the document.xml to location of the program & run it.
  9. Steve
    Steve avatar
    7 posts
    Member since:
    Dec 2013

    Posted 08 Apr in reply to Steve Link to this post

    The problem I encountered is that, when I specify the chart as spline series, but the graph is still show as scatter line.  I'm not quite sure what went wrong, but when I use my data to the existing project that plot spline graph, the problem is there.  I just wonder because of our data is bad?  We used the same data in our old graphic engine & they show correct spline graph.
  10. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 13 Apr Link to this post

    Hello Steve,

    Thank you for the additional explanation. 

    The generated series is SplineSeries as expected. However, it visually appears as step line series because of the plotted data. In order to draw a noticable spline line you need to have at least three adjacent data points on different X coordinates. In your case you have 10 points on a single X that are too close to one another, then another 10 on another X. In this case, the tension of the spline is too small and you cannot see it.

    Regards,
    Martin
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  11. Steve
    Steve avatar
    7 posts
    Member since:
    Dec 2013

    Posted 13 Apr in reply to Martin Link to this post

    Hi Martin,

    You're right, I try several data file, I can see the spline graph now.  Thanks for the information.

Back to Top
UI for WPF is Visual Studio 2017 Ready