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

Zooming RadChart using MVVM

1 Answer 60 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Moon
Top achievements
Rank 1
Moon asked on 04 Apr 2012, 12:44 PM
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

1 Answer, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 09 Apr 2012, 08:54 AM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Tags
Chart
Asked by
Moon
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Share this question
or