Hi,
I am using RadTreeView on the left side of the screen and showing relative data in RadChart on the right of the screen. I am using MVVM design pattern (WPF), but facing few problems (as mentioned below) while zooming chart data.
1. I am NOT able to bind values for RangeEnd and RangeStart with MVVM property for zooming my chart data. My XAML code looks like:
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea Loaded="ChartArea_Loaded">
<telerik:ChartArea.ZoomScrollSettingsY>
<telerik:ZoomScrollSettings />
</telerik:ChartArea.ZoomScrollSettingsY>
<telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ZoomScrollSettings MinZoomRange="0.01" RangeEnd="{Binding ChartRangeEnd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" RangeStart="{Binding ChartRangeStart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ScrollMode="ScrollAndZoom" />
</telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ChartArea.AxisX>
<telerik:AxisX IsDateTime="True"
AutoRange="True"
Step="1"
LabelStep="1"
DefaultLabelFormat="dd-MMM HH:mm"
LabelRotationAngle="30" StripLinesVisibility="Visible">
<telerik:AxisX.AxisStyles>
<telerik:AxisStyles RenderOptions.ClearTypeHint="Enabled" />
</telerik:AxisX.AxisStyles>
</telerik:AxisX>
</telerik:ChartArea.AxisX>
</telerik:ChartArea>
</telerik:ChartDefaultView.ChartArea>
The properties definition in ViewModel is:
double _chartRangeEnd;
public double ChartRangeEnd
{
get { return _chartRangeEnd; }
set
{
_chartRangeEnd = value;
OnPropertyChanged("ChartRangeEnd");
}
}
double _chartRangeStart;
public double ChartRangeStart
{
get { return _chartRangeStart; }
set
{
_chartRangeStart = value;
OnPropertyChanged("ChartRangeStart");
}
}
2. Zooming only works when I change RangeStart and RangeStart value pragmatically (in code behind on ChartArea_Loaded event), as shown below:
private void ChartArea_Loaded(object sender, RoutedEventArgs e)
{
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.None;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = _viewModel.ChartRangeEnd;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.RangeStart = _viewModel.ChartRangeStart;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
}
Moreover if I remove top code line (this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.None;) then slider stretches 100% rather then getting within the limit of RangeStart and RangeEnd values.
The problem which I am facing while using code behind approach (using ChartArea_Loaded) is that when I click on any other node (after selecting first node) in the RadTreeView then RangeStart and RangeEnd values are not getting refreshed (as ChartArea_Loaded event is called only at the starting when Chart is loaded for the first time).
I am willing and hoping to resolve this problem by using MVVM.
Any help will be highly appreciated.
Thank you,
Moon
I am using RadTreeView on the left side of the screen and showing relative data in RadChart on the right of the screen. I am using MVVM design pattern (WPF), but facing few problems (as mentioned below) while zooming chart data.
1. I am NOT able to bind values for RangeEnd and RangeStart with MVVM property for zooming my chart data. My XAML code looks like:
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea Loaded="ChartArea_Loaded">
<telerik:ChartArea.ZoomScrollSettingsY>
<telerik:ZoomScrollSettings />
</telerik:ChartArea.ZoomScrollSettingsY>
<telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ZoomScrollSettings MinZoomRange="0.01" RangeEnd="{Binding ChartRangeEnd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" RangeStart="{Binding ChartRangeStart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ScrollMode="ScrollAndZoom" />
</telerik:ChartArea.ZoomScrollSettingsX>
<telerik:ChartArea.AxisX>
<telerik:AxisX IsDateTime="True"
AutoRange="True"
Step="1"
LabelStep="1"
DefaultLabelFormat="dd-MMM HH:mm"
LabelRotationAngle="30" StripLinesVisibility="Visible">
<telerik:AxisX.AxisStyles>
<telerik:AxisStyles RenderOptions.ClearTypeHint="Enabled" />
</telerik:AxisX.AxisStyles>
</telerik:AxisX>
</telerik:ChartArea.AxisX>
</telerik:ChartArea>
</telerik:ChartDefaultView.ChartArea>
The properties definition in ViewModel is:
double _chartRangeEnd;
public double ChartRangeEnd
{
get { return _chartRangeEnd; }
set
{
_chartRangeEnd = value;
OnPropertyChanged("ChartRangeEnd");
}
}
double _chartRangeStart;
public double ChartRangeStart
{
get { return _chartRangeStart; }
set
{
_chartRangeStart = value;
OnPropertyChanged("ChartRangeStart");
}
}
2. Zooming only works when I change RangeStart and RangeStart value pragmatically (in code behind on ChartArea_Loaded event), as shown below:
private void ChartArea_Loaded(object sender, RoutedEventArgs e)
{
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.None;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = _viewModel.ChartRangeEnd;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.RangeStart = _viewModel.ChartRangeStart;
this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
}
Moreover if I remove top code line (this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.None;) then slider stretches 100% rather then getting within the limit of RangeStart and RangeEnd values.
The problem which I am facing while using code behind approach (using ChartArea_Loaded) is that when I click on any other node (after selecting first node) in the RadTreeView then RangeStart and RangeEnd values are not getting refreshed (as ChartArea_Loaded event is called only at the starting when Chart is loaded for the first time).
I am willing and hoping to resolve this problem by using MVVM.
Any help will be highly appreciated.
Thank you,
Moon