[Solved] Dynamic adding of different type of series

[Shilpa]

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.

[Ves]

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

[Shilpa]

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 .