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.