Dynamic Color for each spline series through Binding in XAML

[Shilpa]

Hi ,

 I am using a RadCartesianChart for displaying multiple SplineSeries with different colors through databinding.

Here is my XAML

  <telerik:RadCartesianChart x:Name="cartesianChart">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>
            
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider x:Name="chartSeriesProvider"  Source="{Binding SplineCollection}">
                <telerik:ChartSeriesProvider.SeriesDescriptors>
                    <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Points" ValuePath="Value" CategoryPath="Category">
                       
                            <telerik:CategoricalSeriesDescriptor.Style>
                      <Style TargetType="telerik:SplineSeries">
                      
                                    <Setter Property="StrokeThickness" Value="{ Binding StrokeThickness}"></Setter>
                                    <Setter Property="DashArray"  Value="{Binding StrokeDashedArray}"></Setter>
                                    <Setter Property="Stroke" Value="{Binding Color,Mode=TwoWay}"></Setter>                      
                      </Style>
                        </telerik:CategoricalSeriesDescriptor.Style>
                    </telerik:CategoricalSeriesDescriptor>
                </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
          
        </telerik:RadCartesianChart>

 

I want different color for each spline series being displayed through binding. Can I do through Style as in the above XAML? I am not able to do it. Also I understand that DataContext for Style is ViewModel. How will I bind to different colors then?

Here is my Model used for binding.

public class SplineSeries:ViewModelBase
    {
        public Color Color
        {
            get; set;
        }

        public double StrokeDashedArray
        {
            get; set;
        }

        public double StrokeThickness
        {
            get; set;
        }

        public ObservableCollection<Data> Points
        {
            get; set;
        }
    }

  public class Data:ViewModelBase
    {
        public double Category { get; set; }
        public double Value { get; set; }
    }

I want the color also DashedArray from SplineSeries Class to Bind to the Stroke and DashArray Properties. How do I Acheive this?

Thanks,

Shilpa

[Ves]

Hi Shilpa,

You can inherit from CategoricalSeriesDescriptor and override the CreateInstanceCore method. Its parameter will be the object that defines the series, in this case it will be your SplineSeries. Then you can get the needed information and configure the chart series. I have attached a small example.

Best regards,
Ves
Telerik

[Shilpa]

Hi Ves,

Ill go through What you did. But the problem solved with the current design itself. The Dash Array was a Double Collection and I was binding It with Double type. Since the Binding Expression went wrong I wasn't getting the color dynamically. 

[Shilpa]

HI Ves,

Another question regarding dynamic type series.Scenario is like this : I will add  series at run time and It could be Spline Series or ScatteredSplineSeries Collection.Now I understand that Horizontal Axis are different for both, say I want Linear Horizontal axis for ScatteredSpline and CategoricalAxis for Spline. How do I do this in declarative way , You could refer the code I posted in the earlier post in this thread and help me do this. 

[Shilpa]

<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>

 

Adding on to above post, here is my XAML. Currently I have two items in the collection and each spline is being shown in both Series Types (ScatterSpline and Spline with 2 axis). I want only one type of series at a time. How do I do this? I have attached the screen shot too.

[Shilpa]

Someone please reply! 

[Ves]

Hi Shilpa,

Given the complexity of the scenario and the need for declarative definition, I would suggest using two different charts -- one for the SplineSeries and one for the ScatterSplineSeries -- and switching their visibility dynamically.

Best regards,
Ves
Telerik

[Shilpa]

Thank you Ves.This solution works.But is there any other visibility property that I can bind to avoid creating another chart? 

[Ves]

Hi Shilpa,

Given the requirement for declarative approach, this would be the simplest way to achieve the desired result. An approach with one chart control might include binding the horizontal axis with converter, but it would be much more complex and error prone.

Best regards,
Ves
Telerik