Point series and Spline Series In CategoricalSeriesDescriptor

[Shilpa]

Hi,

 I am using a RadCartesian Chart where dynamically I want to use either Point Series or Spline Series. One at at time only. But I am not able to set they styles for both the type of series. How do I achieve this. Both are using Horizontal Categprical Axis and vertical Linear Axis. Please help me.

[Ivan]

Hello Shilpa,

Do you mean that you need to switch dynamically in your application between PointSeries and SplineSeries using the same data?

If this is the case you can take a look at the attached project for a sample implementation of this scenario.

In the project there is a ChartSeriesProvider with a CategoricalSeriesDescriptor. The type of the visualized series is controlled by the style of the series descriptor. In the sample project there are two styles - one for PointSeries and one for SplineSeries. When the application is started the Style property of the series descriptor is set to the PointSeriesStyle. In the Button_Click event handler the Style property of the series descriptor is dynamically changed.

In case this project does not suit your needs can you give us a more detailed explanation about your scenario.

Regards,
Ivan
Telerik

[Shilpa]

Hi Ivan,

Thanks for the answer, Meanwhile I tried something like this.

Here is my Xaml.

<telerik:CategoricalSeriesDescriptor.Style>
                               <Style>
                                   <Setter Property="telerik:SplineSeries.StrokeThickness" Value="{Binding StrokeThickness}" />
                                   <Setter Property="telerik:SplineSeries.Stroke" Value="{Binding Color}" />
                                   <Setter Property="telerik:SplineSeries.DisplayName" Value="{Binding Name}" />
                                   <Style.Triggers>
                                       <DataTrigger Binding="{Binding IsPointSeries,Mode=TwoWay}" Value="True">
                                           <Setter Property="telerik:PointTemplateSeries.PointTemplate" Value="{StaticResource PointTemplate}" />
                                       </DataTrigger>

                                       <DataTrigger Binding="{Binding IsDashed,Mode=TwoWay}" Value="True">
                                           <Setter Property="telerik:SplineSeries.DashArray" Value="{Binding DashArray}" />
                                       </DataTrigger>
                                   </Style.Triggers>
                               </Style>
                           </telerik:CategoricalSeriesDescriptor.Style>

[Shilpa]

Hi Ivan,

I followed my idea of going ahead with styles. But I am struggling to bind the height and width of the points in Point Template. The color binding in Point Template is working fine.

Here is my code. 

        <telerik:RadCartesianChart x:Name="CartesianChart" Style="{StaticResource RadCartesianChartStyle1}" HorizontalContentAlignment="Stretch"
                                   VerticalContentAlignment="Stretch">
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineStyle="{StaticResource GridLineStyle}"
                                            MajorYLineStyle="{StaticResource GridLineStyle}" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis Title="{Binding HorizontalAxisTitle}" LineThickness="2" LineStroke="Transparent"
                                         Foreground="{DynamicResource BRUSH_TEXT}"
                                         Style="{StaticResource CategoricalAxisStyle}" />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Title="{Binding VerticalAxisTitle}" LineThickness="2" Foreground="{DynamicResource BRUSH_TEXT}"
                                    Style="{StaticResource LinearAxisStyle}" Maximum="{Binding VerticalMaximum}" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.SmartLabelsStrategy>
                <telerik:ChartSmartLabelsStrategy />
            </telerik:RadCartesianChart.SmartLabelsStrategy>
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider x:Name="ChartSeriesProvider" Source="{Binding SeriesCollection}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Points" CategoryPath="XValue" ValuePath="YValue" TypePath="SeriesType">
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style>
                                    <Setter Property="telerik:SplineSeries.StrokeThickness" Value="{Binding StrokeThickness}" />
                                    <Setter Property="telerik:SplineSeries.Stroke" Value="{Binding Color}" />
                                    <Setter Property="telerik:SplineSeries.DisplayName" Value="{Binding Name}" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsPoint}" Value="True">
                                            <Setter Property="telerik:PointSeries.PointTemplate">
                                                <Setter.Value>
                                                    <DataTemplate>
                                                        <Rectangle
                                                            Height="{Binding  RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type telerik:PointSeries}}, Path=DataContext.PointHeight,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                                            Width="{Binding  RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type telerik:PointSeries}}, Path=DataContext.PointWidth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                                            Fill="{Binding  RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type telerik:PointSeries}}, Path=DataContext.Color}" />
                                                    </DataTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding IsDashed,Mode=TwoWay}" Value="True">
                                            <Setter Property="telerik:SplineSeries.DashArray" Value="{Binding DashArray}" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
        </telerik:RadCartesianChart>

Here are my Models

public class ChartViewModel : INotifyPropertyChanged
   {
       private string myHorizontalAxisTitle;

       public string HorizontalAxisTitle
       {
           get { return myHorizontalAxisTitle; }
           set
           {
               myHorizontalAxisTitle = value;
               OnPropertyChanged();
           }
       }

       private string myVerticalAxisTitle;

       public string VerticalAxisTitle
       {
           get { return myVerticalAxisTitle; }
           set
           {
               myVerticalAxisTitle = value;
               OnPropertyChanged();
           }
       }

       private double myVerticalMaximum;
       public double VerticalMaximum
       {
           get { return myVerticalMaximum; }
           set
           {
               myVerticalMaximum = value;
               OnPropertyChanged();
           }
       }

       private ObservableCollection<SeriesCollection> mySeriesCollection;

       public ObservableCollection<SeriesCollection> SeriesCollection
       {
           get { return mySeriesCollection; }
           set
           {
               mySeriesCollection = value;
               OnPropertyChanged();
           }
       }



       public ChartViewModel()
       {
           SeriesCollection = new ObservableCollection<SeriesCollection>();
       }

       public event PropertyChangedEventHandler PropertyChanged;

       private void OnPropertyChanged([CallerMemberName] String propertyName = "")
       {
           if (PropertyChanged != null)
           {
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
           }
       }
   }

public class SeriesCollection : INotifyPropertyChanged

    {

        private SolidColorBrush myBrush = new SolidColorBrush(Colors.OrangeRed);

 

        public SolidColorBrush Color

        {

            get { return myBrush; }

            set

            {

                myBrush = value;

                OnPropertyChanged();

            }

        }

 

        private double myPointHeight=20;

 

        public double PointHeight

        {

            get { return myPointHeight; }

            set

            {

                myPointHeight = value;

                OnPropertyChanged();

            }

        }

 

        private double myPointWidth=20;

 

        public double PointWidth

        {

            get { return myPointWidth; }

            set

            {

                myPointWidth = value;

                OnPropertyChanged();

            }

        }

 

        private double myStrokeThickness;

 

        public double StrokeThickness

        {

            get { return myStrokeThickness; }

            set

            {

                myStrokeThickness = value;

                OnPropertyChanged();

            }

        }

 

        private bool myIsDashed;

 

        public bool IsDashed

        {

            get { return myIsDashed; }

            set

            {

                myIsDashed = value;

                OnPropertyChanged();

            }

        }

 

        private bool myIsPoint;

 

        public bool IsPoint

        {

            get { return myIsPoint; }

            set

            {

                myIsPoint = value;

                OnPropertyChanged();

            }

        }

 

        private DoubleCollection myDashArray;

 

        public DoubleCollection DashArray

        {

            get { return myDashArray; }

            set

            {

                myDashArray = value;

                OnPropertyChanged();

            }

        }

 

        private Type mySeriesType;

 

        public Type SeriesType

        {

            get { return mySeriesType; }

            set

            {

                mySeriesType = value;

                OnPropertyChanged();

            }

        }

 

        private ObservableCollection<Point> myPoints;

 

        public ObservableCollection<Point> Points

        {

            get { return myPoints; }

            set

            {

                myPoints = value;

                OnPropertyChanged();

            }

        }

 

        public event PropertyChangedEventHandler PropertyChanged;

 

        private void OnPropertyChanged([CallerMemberName] String propertyName = "")

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

public class Point : INotifyPropertyChanged

    {

        private string myXValue;

 

        public string XValue

        {

            get { return myXValue; }

            set

            {

                myXValue = value;

                OnPropertyChanged();

            }

        }

 

        private double myYValue;

 

        public double YValue

        {

            get { return myYValue; }

            set

            {

                myYValue = value;

                OnPropertyChanged();

            }

        }

}

Please Help me identify what is going wrong here. It would be really great if you could help me out. 

Thanks in advance!

[Ivan]

Hi Shilpa,

The height and width of the points are bound correctly. The reason for this behavior is that the relative source binding is completed too late. Before the binding of the width and height has been executed, the content presenter that is the container of the data template has already determined and cached it's width and height.
Finally the data template of the point series has correct width and height, but it's parent has width and height equal to 0.

One way to make the points appear is to modify the template. You can include an additional element with a static width and height and position the Rectangle in its center.

<Setter Property="telerik:PointSeries.PointTemplate">
 <Setter.Value>
   <DataTemplate>
    <Border Width="50" Height="50">
     <Rectangle Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:PointSeries}},
        Path=DataContext.PointWidth,
        Mode=TwoWay,
        UpdateSourceTrigger=PropertyChanged}"
        Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:PointSeries}},
        Path=DataContext.PointHeight,
        Mode=TwoWay,
        UpdateSourceTrigger=PropertyChanged}"
        Fill="{Binding  RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:PointSeries}},
        Path=DataContext.Color,
        Converter={StaticResource TestConverter}}"
        HorizontalAlignment="Center"
        VerticalAlignment="Center" />
      </Border>
     </DataTemplate>
    </Setter.Value>
</Setter>

Please bear in mind, that the width and height of the border must be equal to the maximum possible width and height of the rectangle. Let us know if this solution works for you.

Regards,
Ivan
Telerik

[Shilpa]

Thank you Ivan, It works!