Automatically move the chart

Hi!



I have RadCartesianChart which HorizontalAxis is DateTimeContinuousAxis and VerticalAxis is LinearAxis.

The Y axis displays some constant values, so I don't have to change its maximum and minimum, zoom it or pan it.

The X axis is updated each time background agent is run (every 30 minutes or so), so I need to automatically scroll the chart to the right starting a certain moment. That means, for example, when the gap between min and max values becomes > 10 hours, the chart must show only those values that are within the "last_date - 10hrs" interval, and the user must scroll left to see previous values.



The problem is that I don't know exactly how to do this :) Should I manually specify minimum value as "last_date - 10hrs" each time chart's itemssource is updated, or there is some XAML attribute or so? Thank you in advance!



Best regards,

Alexander.

Hi Alexander,

Thanks for the question.
You have to cast your chart to the IChartView interface. Then you will have access to the ViewportWidth and ViewportHeight properties. With these in hand, you will have to set Zoom and PanOffset ot appropriate values once you refresh the chart.
For example, assume that you have 10 points on the chart initially. After 30 minutes, when your agent runs, another 20 points will be retrieved. Now, with 20 points in the chart, you will have to increase your Zoom to 2, and your PanOffset to Zoom * ViewportWidth. This way you will be viewing the newly added points. These numbers are just examples, you can use the same principle to tweak the pan offset, so that it displays the data points you want.

I hope that's helpful.

Kind regards,
Victor
the Telerik team

Hi,



Thank you for your answer! Wow, that's really complex and thus a bit ugly :( Please consider making it simpler and MVVM-compliant in the next releases!



Talking about suggested solution, what am I supposed to do with my DateTimeContinuousAxis? Please review my idea and correct me if I'm wrong:



1. To enable it interact with my ViewModel, I create Binding for Chart's Zoom and PanOffset properties like this:



var zoomBinding = new Binding("Zoom")

{

    Source = this.ViewModel.StatsViewModel.ChartZoom,

    Mode = BindingMode.OneWay

};

var panOffsetBinding = new Binding("PanOffset")

{

    Source = this.ViewModel.StatsViewModel.ChartZoom.Width*((IChartView)this.MyChart).ViewportWidth,

    Mode = BindingMode.OneWay

};

this.MyChart.SetBinding(RadChartBase.ZoomProperty, zoomBinding);

this.MyChart.SetBinding(RadChartBase.PanOffsetProperty, panOffsetBinding);



2. In my ViewModel, I:

2.1. Initialize ChartZoom property as new Size(1.0, 1.0);

2.2. Change ChartZoom property on chart data update like following:



if (this._chartData.Count > 0)

{

    var maxSpan = this._chartData.Last().Date - this._chartData.First().Date;

    if (maxSpan > TimeSpan.FromDays(1.0))

        this.ChartZoom = new Size(maxSpan.Ticks/(double)TimeSpan.FromDays(1.0).Ticks, 1.0);

}



ChartZoom property has "NotifyPropertyChanged" in its setter, of course.

Will such binding work? Did I write the code to calculate ChartZoom value right? Thank you!



Best regards,

Alexander.

Hi Alexander,

To be truly MVVM, your app needs to set the bindings through XAML. You have to set your view model as the data context of your chart. Then you have to bind the PanOffset and Zoom properties to your view model. Then all you have to do is to update your Pan and Zoom properties of the view model.

The only inconvenience here is that you will have to let your view model know about the chart's viewport. This will be fixed in the next (Q2 2013) release because we plan to change the Pan property meaning from pixels to a value between 0 and 1, 0 being a left most pan and 1 being a right most pan. This way you will not need to pass information about the chart viewport to the view model.

Kind regards,
Victor
the Telerik team

Hi!

So now IChartView became an internal interface, so the above workaround doesn't work.

What to do now?

Regards,

Sgt.Riggs.

Hello Alexander,

Thank you for using RadControls for Windows Phone.

I have redirected this issue to our development team and they will need some time to investigate the possibilities and decide whether to make the IChartView interface public again or provide other way to access the chart viewport width.

Please, excuse us for the inconvenience caused. We will contact you as soon as the issue is resolved.

Regards,
Rositsa Topchiyska
Telerik

Hello Alexander,

A quick follow-up to inform you that we will make the IChartView interface public again to enable programmatically moving scrolling chart to a given position.

We will include the update in one of our upcoming Internal Builds, as well as in the official Q3 2013 coming in a couple of months.

Let us know should you have further questions or need assistance.

Regards,
Deyan
Telerik

Hi Deyan,

Actually, after a short investigation, it seems to me that you have changed the PanOffset property of the chart so that 1.0 now represents the right most position and 0.0 is the left most position, so for my needs I can just set PanOffset to 1.0,1.0 and change the horizontal zoom. At least it seems to work, please confirm these changes.

Best regards,

Alexander.

I have the exact same issue using WPF MVVM and I don't understand where ViewportWidth is used to open a RadCartesianChart up to a five minute scrolling window. Do I create a style and setter? How do I set a ViewPort to show only 5 minutes? I've researched this off and on over the last couple weeks and spent three hours today searching the internet for a good XAML example and I haven't found anything that works. Thank you for your help!

    <telerik:RadCartesianChart x:Name="RadCartesianChart4"
                                   Margin="0,10,0,0"
                                   MinHeight="200"
                                   MinWidth="600"
                                   Palette="Autumn"
                                   Background="AntiqueWhite"
                                   
                                     >
            <telerik:RadCartesianChart.Grid>
              <telerik:CartesianChartGrid MajorLinesVisibility="Y" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.Behaviors>
              <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal"/>
            </telerik:RadCartesianChart.Behaviors>


            <telerik:LineSeries CategoryBinding="Timestamp_Value" ValueBinding="MseFlow_Value" Stroke="Blue" ItemsSource="{Binding ElementName=ChartDataSource1}">
              <telerik:LineSeries.LegendSettings>
                <telerik:SeriesLegendSettings Title="MSE"/>
              </telerik:LineSeries.LegendSettings>
              <telerik:LineSeries.VerticalAxis>
                <telerik:LinearAxis HorizontalLocation="Left" FontSize="8" ElementBrush="Blue" />
              </telerik:LineSeries.VerticalAxis>
            </telerik:LineSeries>
            <telerik:LineSeries CategoryBinding="Timestamp_Value" ValueBinding="BitDiameter_Value" Stroke="Brown" ItemsSource="{Binding ElementName=ChartDataSource1}">
              <telerik:LineSeries.LegendSettings>
                <telerik:SeriesLegendSettings Title="Bit Diameter"/>
              </telerik:LineSeries.LegendSettings>
              <telerik:LineSeries.VerticalAxis>
                <telerik:LinearAxis HorizontalLocation="Right" FontSize="8" ElementBrush="Brown" />
              </telerik:LineSeries.VerticalAxis>
            </telerik:LineSeries>
            <telerik:RadCartesianChart.HorizontalAxis>
              <telerik:DateTimeContinuousAxis
                                          MajorStepUnit="Minute"
                                          LabelInterval="5"
                                          LabelFormat="HH:mm:ss" FontFamily="Segoe UI"
                                          PlotMode="OnTicks"
                                          TickOrigin="{Binding AlignmentDate}"
                                          ElementBrush="Black"
                                          />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
              <telerik:LinearAxis 
                              MajorStep="100"
                              FontFamily="Segoe UI"
                              ElementBrush="Black">
                <telerik:LinearAxis.LabelTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding}" Foreground="Black"/>
                  </DataTemplate>
                </telerik:LinearAxis.LabelTemplate>
              </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>
          </telerik:RadCartesianChart>

Hi Richard,
Regards,
Dimitrina
Telerik

Hi Richard,

You have reached our UI for Windows Phone Forum. Since your question targets different platform I am going to ask you to post your question in our UI for WPF Forum. Switching this whole thread to other forum will not be appropriate because there are several other posts regarding this platform and they are correctly posted and have served to clients using the Windows Phone platform for months. 

Regards,
Pavel R. Pavlov
Telerik