Dynamic adding of different type of series

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

    Posted 13 Dec 2015 Link to this post

    Hi ,

    I have collection of series to be plotted on chart. I am using RadCartesianChart. At run time i need to decide which type of chart it is. Either it can be Spline or ScatterSplineSeries. I understand that the horizontal axis is different for both. Here is my XAML and models. 

    <Window.DataContext>
          <viewModels:MainViewModel />
      </Window.DataContext>
      <Window.Resources>
          <ResourceDictionary>
              <ResourceDictionary.MergedDictionaries>
                  <ResourceDictionary Source="RadChartStyleResourceDictionary.xaml"></ResourceDictionary>
              </ResourceDictionary.MergedDictionaries>
          </ResourceDictionary>
      </Window.Resources>
      <Grid>
          <telerik:RadCartesianChart x:Name="CartesianChart" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"  Style="{StaticResource RadCartesianChartStyle1}">
              <telerik:RadCartesianChart.Grid>
                  <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineStyle="{StaticResource GridLineStyle}" MajorYLineStyle="{StaticResource GridLineStyle}">
                  </telerik:CartesianChartGrid>
              </telerik:RadCartesianChart.Grid>
              <telerik:RadCartesianChart.HorizontalAxis>
                  <telerik:LinearAxis Title="{Binding HorizontalAxisTitle}"  Minimum="0" Maximum="35" LineThickness="2" LineStroke="Transparent" Foreground="{DynamicResource BRUSH_TEXT}" Style="{StaticResource LinearAxisStyle}"/>
              </telerik:RadCartesianChart.HorizontalAxis>
              <telerik:RadCartesianChart.VerticalAxis>
                  <telerik:LinearAxis Minimum="0" Maximum="100" Title="{Binding VerticalAxisTitle}" LineThickness="2"  Foreground="{DynamicResource BRUSH_TEXT}" Style="{StaticResource LinearAxisStyle}"/>
              </telerik:RadCartesianChart.VerticalAxis>
     
              <telerik:RadCartesianChart.Behaviors>
                  <telerik:ChartPanAndZoomBehavior DragMode="Pan" ZoomMode="Both" PanMode="Both"/>
              </telerik:RadCartesianChart.Behaviors>
     
     
              <telerik:RadCartesianChart.SeriesProvider>
                  <telerik:ChartSeriesProvider x:Name="chartSeriesProvider"  Source="{Binding SplineCollection}">
                       
                  <telerik:ChartSeriesProvider.SeriesDescriptors >
                              
                              <telerik:ScatterSeriesDescriptor ItemsSourcePath="Points" YValuePath="YValue" XValuePath="XValue">
                              <telerik:ScatterSeriesDescriptor.Style>
                                  <Style TargetType="telerik:ScatterSplineSeries">
                                      <Setter Property="StrokeThickness" Value="{Binding StrokeThickness}"></Setter>
                                      <Setter Property="Stroke" Value="{Binding Color}"></Setter>
                                      <Setter  Property="ShowLabels" Value="True"></Setter>
                                      <Style.Triggers>
                                          <DataTrigger Binding="{Binding IsDashed}" Value="True">
                                              <Setter Property="DashArray" Value="5"></Setter>
                                          </DataTrigger>
                                      </Style.Triggers>
                        </Style>
                          </telerik:ScatterSeriesDescriptor.Style>
                      </telerik:ScatterSeriesDescriptor >
                       
                       
                          <telerik:CategoricalSeriesDescriptor  ItemsSourcePath="Points" ValuePath="YValue" CategoryPath="XValue" >
                              <telerik:CategoricalSeriesDescriptor.Style>
                                  <Style TargetType="telerik:SplineSeries">
                                      <Setter Property="StrokeThickness" Value="{Binding StrokeThickness}"></Setter>
                                      <Setter Property="Stroke" Value="{Binding Color}"></Setter>
                                      <Setter  Property="ShowLabels" Value="True"></Setter>
                                      <Setter Property="HorizontalAxis">
                                          <Setter.Value>
                                              <telerik:CategoricalAxis Title="{Binding HorizontalAxisTitle}" LineThickness="2" LineStroke="Transparent" Foreground="{DynamicResource BRUSH_TEXT}" Style="{StaticResource CategoricalStyle}"/>
                                            
                                          </Setter.Value>
                                      </Setter>
                                      <Style.Triggers>
                                          <DataTrigger Binding="{Binding IsDashed}" Value="True">
                                              <Setter Property="DashArray" Value="5"></Setter>
                                          </DataTrigger>
                                      </Style.Triggers>
                                  </Style>
                              </telerik:CategoricalSeriesDescriptor.Style>
                             
                          </telerik:CategoricalSeriesDescriptor>
                      </telerik:ChartSeriesProvider.SeriesDescriptors>
                     
                  </telerik:ChartSeriesProvider>
              </telerik:RadCartesianChart.SeriesProvider>
             
          </telerik:RadCartesianChart>

    ViewModel:

    public class MainViewModel :ViewModelBase
       {
           public string HorizontalAxisTitle
           {
               get; set;
           }
     
           public string VerticalAxisTitle { get; set; }
     
           public ObservableCollection<SplineSeries> SplineCollection { get; set; }
           public MainViewModel()
           {
               HorizontalAxisTitle = string.Format("{0}", "Grey Value");
               VerticalAxisTitle = string.Format( "{0}", "Volume" );
               this.SplineCollection = GetSplineCollection();
           }
     
           private ObservableCollection<SplineSeries> GetSplineCollection()
           {
               var result = new ObservableCollection<SplineSeries>
               {
                   new SplineSeries()
                   {
                       Color = new SolidColorBrush(Colors.Red),
                       StrokeThickness = 2,
                       Name = "Structure1",
                       Points = new ObservableCollection<Data>()
                       {
                           new Data() {XValue = 0, YValue = 100},
                           new Data() {XValue = 5, YValue = 100},
                           new Data(){XValue = 9,YValue=90},
                           new Data() {XValue = 10, YValue = 50},
                           new Data() {XValue = 20, YValue = 80},
                            new Data() {XValue = 25, YValue = 60},
                            new Data(){XValue = 30,YValue = 0}
                       }
     
     
                   },
                   new SplineSeries()
                   {
                       Color = new SolidColorBrush(Colors.Orange),
                      IsDashed = true,
                       StrokeThickness = 2,
                       Name = "Structure2",
                       Points = new ObservableCollection<Data>()
                       {
                           new Data() {XValue = 0, YValue = 100},
                           new Data() {XValue = 5, YValue = 100},
                           new Data() {XValue = 10, YValue = 50},
                           new Data() {XValue = 20, YValue = 0}
     
                       }
     
                   }
               };
               return result;
           }
       }

    Model:

    public class SplineSeries : ViewModelBase
       {
           private SolidColorBrush myBrush = new SolidColorBrush( Colors.OrangeRed );
           public SolidColorBrush Color
           {
               get { return myBrush; }
               set { myBrush = value; }
           }
           public string  Name { get; set; }
           public double StrokeThickness { get; set; }
     
           public bool IsDashed { get; set; }
     
           public ObservableCollection<Data> Points { get; set; }
       }

    public class Data:ViewModelBase
       {
           public double XValue { get; set; }
           public double YValue { get; set; }
        
       }

    I have attached the snap shot. Both the type of series is being displayed. I want only one type of series as per runtime decision. 

    Now how will I do dynamically what type of series to display. I would not prefer changing the design. Plese help me acheive this.

  2. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 16 Dec 2015 Link to this post

    Hi Shilpa,

    As suggested in the other thread you have started, using two charts interchangeably would allow you to achieve the desired result with minimum complexity.

    Best regards,
    Ves
    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. DevCraft banner
  4. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 16 Dec 2015 in reply to Ves Link to this post

    Thank you Ves.Will you please help me solve this? http://www.telerik.com/forums/varying-dynamic-x-axis-label-interval. I started it in a new thread .
Back to Top