Point series and Spline Series In CategoricalSeriesDescriptor

6 posts, 2 answers
  1. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 17 Feb Link to this post

    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.

  2. Answer
    Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 22 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 22 Feb in reply to Ivan Link to this post

    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>

  5. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 23 Feb in reply to Shilpa Link to this post

    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!

  6. Answer
    Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 24 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 24 Feb in reply to Ivan Link to this post

    Thank you Ivan, It works!
Back to Top
UI for WPF is Visual Studio 2017 Ready