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

Automatically move the chart

11 Answers 267 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Sgt.Riggs
Top achievements
Rank 1
Sgt.Riggs asked on 26 Feb 2013, 11:54 PM
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.

11 Answers, 1 is accepted

Sort by
0
Victor
Telerik team
answered on 28 Feb 2013, 02:47 PM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Sgt.Riggs
Top achievements
Rank 1
answered on 03 Mar 2013, 10:22 PM
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.
0
Victor
Telerik team
answered on 05 Mar 2013, 11:51 AM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Sgt.Riggs
Top achievements
Rank 1
answered on 20 Aug 2013, 07:01 PM

Hi!

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

What to do now?

Regards,

Sgt.Riggs.

0
Rosy Topchiyska
Telerik team
answered on 26 Aug 2013, 12:23 PM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Deyan
Telerik team
answered on 26 Aug 2013, 03:21 PM
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
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Sgt.Riggs
Top achievements
Rank 1
answered on 26 Aug 2013, 03:48 PM

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.

0
Accepted
Deyan
Telerik team
answered on 28 Aug 2013, 07:47 AM
Hello Alexander,

That is correct. In this aspect you will no longer need to know the whole chart area in order to calculate the offset. If setting a value from 0 to 1 is fine for you, we will consider this case closed.

Regards,
Deyan
Telerik
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Richard
Top achievements
Rank 1
answered on 05 Nov 2014, 04:52 PM
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>
0
Dimitrina
Telerik team
answered on 10 Nov 2014, 01:05 PM
Hi Richard,

Your question relates to the RadCartesianChart component which is part of our UI for WPF suite. I've updated the product area associated with this support thread and a support officer will provide you with an answer as soon as possible.

Regards,
Dimitrina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Pavel R. Pavlov
Telerik team
answered on 10 Nov 2014, 01:32 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart
Asked by
Sgt.Riggs
Top achievements
Rank 1
Answers by
Victor
Telerik team
Sgt.Riggs
Top achievements
Rank 1
Rosy Topchiyska
Telerik team
Deyan
Telerik team
Richard
Top achievements
Rank 1
Dimitrina
Telerik team
Pavel R. Pavlov
Telerik team
Share this question
or