Lasso Zoom
RadChartView provides lasso zoom (zoom to selection) functionality by selecting a rectangle on the surface of the control and then zoom in automatically based on the selected Cartesian area.
First let’s start by adding some data points to the RadChartView and LassoZoomController:
Add Controller
public LassoSelection()
{
InitializeComponent();
LineSeries lineSeries = new LineSeries();
lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));
lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));
lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));
lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));
lineSeries.PointSize = new SizeF(10,10);
radChartView1.Series.Add(lineSeries);
LineSeries lineSeries2 = new LineSeries();
lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));
lineSeries2.PointSize = new SizeF(10,10);
radChartView1.Series.Add(lineSeries2);
LassoZoomController lassoZoomController = new LassoZoomController();
radChartView1.Controllers.Add(lassoZoomController);
}
Public Sub New()
InitializeComponent()
Dim lineSeries As New LineSeries()
lineSeries.DataPoints.Add(New CategoricalDataPoint(20, "Jan"))
lineSeries.DataPoints.Add(New CategoricalDataPoint(22, "Apr"))
lineSeries.DataPoints.Add(New CategoricalDataPoint(12, "Jul"))
lineSeries.DataPoints.Add(New CategoricalDataPoint(19, "Oct"))
lineSeries.PointSize = New SizeF(10, 10)
RadChartView1.Series.Add(lineSeries)
Dim lineSeries2 As New LineSeries()
lineSeries2.DataPoints.Add(New CategoricalDataPoint(18, "Jan"))
lineSeries2.DataPoints.Add(New CategoricalDataPoint(15, "Apr"))
lineSeries2.DataPoints.Add(New CategoricalDataPoint(17, "Jul"))
lineSeries2.DataPoints.Add(New CategoricalDataPoint(22, "Oct"))
lineSeries2.PointSize = New SizeF(10, 10)
RadChartView1.Series.Add(lineSeries2)
Dim lassoZoomController As New LassoZoomController()
RadChartView1.Controllers.Add(lassoZoomController)
End Sub
Figure 1: Initial Chart
Now, let’s select some area:
Figure 2: Lasso Selection
And the chart will automatically zoom to the selected area:
Figure 3: Zoom to Selection
LassoZoomController supports zoom and pan functionality programmatically via the ZoomAndPan method, which allows specifying the exact from and to percentage. The following code will zoom the first half of the chart:
Zoom and Pan
private void LassoSelection_Load(object sender, EventArgs e)
{
LassoZoomController lassoZoomController = radChartView1.Controllers[1] as LassoZoomController;
if (lassoZoomController != null)
{
lassoZoomController.ZoomAndPan(0, 50);
}
}
Private Sub LassoSelection_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim lassoZoomController As LassoZoomController = TryCast(RadChartView1.Controllers(1), LassoZoomController)
If lassoZoomController IsNot Nothing Then
lassoZoomController.ZoomAndPan(0, 50)
End If
End Sub
Figure 4: Zoom and Pan
Using this approach you can zoom any area in the chart using the 0-100 percentage scale.
The controllers added in RadChartView are invoked in the order at which they have been added. In case a LassoZoomController is to be used together with a LassoSelectionController, the selection controller needs to be added first.