Zooming RadChart using MVVM

[Moon]

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

[Petar Marchev]

Hi Moon,

Yes, there appears to be an issue related to the inheritance of the data context. For some reason the ZoomScrollSettings does not get a data context. As a simple work-around I can suggest that you set the source explicitly:

RangeStart="{Binding SelectionStart, Source={StaticResource MainViewModel}}"

I have attached a simple app that demonstrates this. I hope that it is a feasible solution to somehow import the view model into the page resources. 

Regards,
Petar Marchev
the Telerik team