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