SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
I am trying to call the ZoomBy() method of SciChart control from ViewModel. The ZoomBy() is easily available in the xaml.cs file like below:
// TODO: Need to implement zoom using MVVM
private void BtnZoomIn_Click(object sender, RoutedEventArgs e)
{
TemperatureGraph.ChartModifier.XAxis.ZoomBy(-0.1, -0.1);
}
The same functionality I need to implement using the ViewModel pattern.
However the ZoomExtents method is easily being called using ViewportManager of SciChart control. E.g. below: XAML file
<RocheButton Name="BtnZoomOut" DockPanel.Dock="Top" Icon="{IconResource Icon=ZoomOut}" HorizontalAlignment="Right" Command="{Binding ZoomOutCommand}" />
<s:SciChartSurface x:Name="TemperatureGraph" Grid.Column="0" s:ThemeManager.Theme="BrightSpark"
RenderableSeries="{s:SeriesBinding TemperatureGraphViewModel}" DockPanel.Dock="Bottom"
ViewportManager="{Binding ViewportManager}">
And the ViewModel Code:
public class TemperatureSummaryGraphViewModel : ViewModelBase
{
#region Private Members
private IXyDataSeries<TimeSpan, double> TemperatureDataSeries = new XyDataSeries<TimeSpan, double>();
private IXyDataSeries<TimeSpan, double> AcquisitionPointDataSeries = new XyDataSeries<TimeSpan, double>();
private DefaultViewportManager _viewportManager = new DefaultViewportManager();
private ICommand _zoomOutCommand;
#endregion
#region Constructor
public TemperatureSummaryGraphViewModel()
{
ZoomOutCommand = new DelegateCommand(() => ZoomOutTemperatureGrpah());
GenerateDummySeries();
TemperatureGraphViewModel.Add(new LineRenderableSeriesViewModel()
{
DataSeries = TemperatureDataSeries,
StyleKey = "LineSeriesStyle0"
});
TemperatureGraphViewModel.Add(new XyScatterRenderableSeriesViewModel()
{
DataSeries = AcquisitionPointDataSeries,
StyleKey = "ScatterSeriesStyle0"
});
}
#endregion
#region Public Properties
public ObservableCollection<IRenderableSeriesViewModel> TemperatureGraphViewModel { get; } = new ObservableCollection<IRenderableSeriesViewModel>();
public IViewportManager ViewportManager
{
get
{
return _viewportManager;
}
set
{
if (ReferenceEquals(value, _viewportManager))
{
return;
}
_viewportManager = (DefaultViewportManager)value;
OnPropertyChanged("ViewportManager");
}
}
public ICommand ZoomOutCommand
{
get
{
return _zoomOutCommand;
}
set
{
if (ReferenceEquals(value, _zoomOutCommand))
{
return;
}
_zoomOutCommand = value;
OnPropertyChanged(nameof(ZoomOutCommand));
}
}
#endregion
#region Public Methods
/// <summary>
/// To generate dummy data
/// // TODO: Need to integrate it with RunEditor with the actual data
/// </summary>
public void GenerateDummySeries()
{
double y = 80.5, yVar = 30.0;
TemperatureDataSeries.Append(TimeSpan.FromMinutes(1), 40.0);
TemperatureDataSeries.Append(TimeSpan.FromMinutes(2), 80.5);
for (int x = 2; x < 50; x++)
{
TemperatureDataSeries.Append(TimeSpan.FromMinutes(x), y);
yVar *= -1;
y += yVar;
}
for (var i = 5.4; i < 50; i += 2)
{
AcquisitionPointDataSeries.Append(TimeSpan.FromMinutes(i), 60.0);
}
}
public void ZoomOutTemperatureGrpah()
{
_viewportManager.ZoomExtents();
}
#endregion
}
}
This code is working fine and zooming out the scichart control to 100%.
I want to implement the same using the ZoomBy().
Please help!
Hi,
There are some methods exposed in the API, ZoomBy and ZoomExtent which can programmatically be called from the code behind.
I am binding the series using IRenderableSeriesViewModel in MVVM pattern. Can we zoom the sciChart surface on a button click in ModelView?
Appreciating your help on this.
Thanks