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

Automatically move the chart

11 Answers 338 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 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

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.

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.

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.

Accepted

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>