This is a migrated thread and some comments may be shown as answers.

Dynamic Color for each spline series through Binding in XAML

8 Answers 75 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Shilpa
Top achievements
Rank 1
Shilpa asked on 09 Dec 2015, 05:48 AM

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

8 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 11 Dec 2015, 09:38 AM
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
0
Shilpa
Top achievements
Rank 1
answered on 11 Dec 2015, 10:29 AM

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. 

0
Shilpa
Top achievements
Rank 1
answered on 11 Dec 2015, 10:37 AM

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. 

0
Shilpa
Top achievements
Rank 1
answered on 11 Dec 2015, 11:47 AM
<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.

0
Shilpa
Top achievements
Rank 1
answered on 15 Dec 2015, 04:56 AM
Someone please reply! 
0
Accepted
Ves
Telerik team
answered on 15 Dec 2015, 12:29 PM
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
0
Shilpa
Top achievements
Rank 1
answered on 16 Dec 2015, 02:02 AM
Thank you Ves.This solution works.But is there any other visibility property that I can bind to avoid creating another chart? 
0
Accepted
Ves
Telerik team
answered on 17 Dec 2015, 07:54 AM
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
Tags
Chart
Asked by
Shilpa
Top achievements
Rank 1
Answers by
Ves
Telerik team
Shilpa
Top achievements
Rank 1
Share this question
or