New to Telerik UI for WinForms? Download free 30-day trial

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

WinForms RadChartView Initial Chart

Now, let’s select some area:

Figure 2: Lasso Selection

WinForms RadChartView Lasso Selection Area

And the chart will automatically zoom to the selected area:

Figure 3: Zoom to Selection

WinForms RadChartView 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

WinForms RadChartView 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.

See Also

In this article