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
9 Answers, 1 is accepted
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
Rank 1
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>
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
Rank 1
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
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
Rank 1
Rank 1
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
Rank 1
Hi Martin,
You're right, I try several data file, I can see the spline graph now. Thanks for the information.