Dynamic Color for each spline series through Binding in XAML

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

    Posted 08 Dec 2015 Link to this post

    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

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 11 Dec 2015 Link to this post

    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
    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 11 Dec 2015 in reply to Ves Link to this post

    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. 

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

    Posted 11 Dec 2015 Link to this post

    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. 

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

    Posted 11 Dec 2015 in reply to Shilpa Link to this post

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

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

    Posted 14 Dec 2015 Link to this post

    Someone please reply! 
  8. Answer
    Ves
    Admin
    Ves avatar
    2879 posts

    Posted 15 Dec 2015 Link to this post

    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
    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
  9. Shilpa
    Shilpa avatar
    43 posts
    Member since:
    Dec 2015

    Posted 15 Dec 2015 Link to this post

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

    Posted 17 Dec 2015 Link to this post

    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
    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
Back to Top
DevCraft banner