Automatically move the chart

12 posts, 1 answers
  1. Sgt.Riggs
    Sgt.Riggs avatar
    4 posts
    Member since:
    Dec 2012

    Posted 26 Feb 2013 Link to this post

    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.
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 28 Feb 2013 Link to this post

    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.
  3. DevCraft banner
  4. Sgt.Riggs
    Sgt.Riggs avatar
    4 posts
    Member since:
    Dec 2012

    Posted 03 Mar 2013 Link to this post

    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.
  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 05 Mar 2013 Link to this post

    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.
  6. Sgt.Riggs
    Sgt.Riggs avatar
    4 posts
    Member since:
    Dec 2012

    Posted 20 Aug 2013 Link to this post

    Hi!

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

    What to do now?

    Regards,

    Sgt.Riggs.

  7. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 26 Aug 2013 Link to this post

    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.
  8. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 26 Aug 2013 Link to this post

    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.
  9. Sgt.Riggs
    Sgt.Riggs avatar
    4 posts
    Member since:
    Dec 2012

    Posted 26 Aug 2013 Link to this post

    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.

  10. Answer
    Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 28 Aug 2013 Link to this post

    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.
  11. Richard
    Richard avatar
    11 posts
    Member since:
    Jul 2014

    Posted 05 Nov 2014 in reply to Deyan Link to this post

    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>
  12. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 10 Nov 2014 Link to this post

    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.

     
  13. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 10 Nov 2014 Link to this post

    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.

     
Back to Top
DevCraft banner