Nevron .NET Vision
Chart for .NET / User's Guide / Interactivity / Drag Tools / Data Zooming

In This Topic
    Data Zooming
    In This Topic
    Nevron Chart has a build in feature called "Data Zooming" allowing to synchronize the axis paging of a selected set of axes with a rectangular area specified with the mouse.

    Data zooming works closely with range selections that provide feedback to the user. To enable data zooming you need to add an object of type NDataZoomTool to the NToolCollection of the control and a NRangeSelection object to the chart:

    C#
    Copy Code
    NCartesianChart chart = (NCartesianChart)chartControl.Charts[0];
    chart.RangeSelections.Add(new NRangeSelection());
    
    chartControl.Controller.Tools.Add(new NSelectorTool());
    chartControl.Controller.Tools.Add(new NDataZoomTool());
    
    Visual Basic
    Copy Code
    Dim chart As NCartesianChart = chartControl.Charts(0)
    chart.RangeSelections.Add(New NRangeSelection)
    
    chartControl.Controller.Tools.Add(New NSelectorTool)
    chartControl.Controller.Tools.Add(New NDataZoomTool)
    

    This will enable data zooming with default parameters. Now when the user presses the left mouse button over the chart area and drags the mouse a semi transparent rectangle will appear that shows visually the area of the chart that will be displayed when the user releases the mouse button.

    When the start position of the mouse in axis coordinates is smaller than the current position of the mouse in axis coordinates the chart will perform a zoom in of the axes. This means that when the user releases the left mouse button the axes will be configured to display only the area of the chart selected by the user.

    In contrast when the start position of the mouse in axis coordinates is bigger than the current position of the mouse in axis coordinates the chart will perform a zoo out of the axes. When zooming out the selected area defines a range in the axis values where the current data visualized by the chart will be fit.

    The chart will paint the selected area in semi transparent blue when a zoom in is about to occur and semi transparent red when a zoom out will occur.

     Controlling the Zoom Axes

    By default the zoom operates on the PrimaryX and PrimaryY axes. You can modify this behavior by modifying the HorizontalAxisId and VerticalAxisId properties of the NRangeSelection object. The following code for example will configure the range selection to operate on the Depth and PrimaryY axes:

    C#
    Copy Code
    NCartesianChart chart = (NCartesianChart)chartControl.Charts[0];
    NRangeSelection rangeSelection = new NRangeSelection();
    
    rangeSelection.HorizontalAxisId = (int)StandardAxis.Depth;
    rangeSelection.VerticalAxisId = (int)StandardAxis.PrimaryY;
    
    chart.RangeSelections.Add(rangeSelection);
    
    Visual Basic
    Copy Code
    Dim chart As NCartesianChart = chartControl.Charts(0)
    Dim rangeSelection As New NRangeSelection
    
    rangeSelection.HorizontalAxisId = CType(StandardAxis.Depth, Integer)
    rangeSelection.VerticalAxisId = CType(StandardAxis.PrimaryY, Integer)
    
    chart.RangeSelections.Add(rangeSelection)
    

    You must select a pair of axes that are not collinear.

     Controlling the Range of Selectable Values

    The range of selectable values can be controlled through the HorizontalValueSnapper and VerticallValueSnapper properties of the range selection object.

    Please refer to the Range Selections and Value Snapping topics for more information on value snapping for range selections.

    The following code demonstrates how to prevent the user from selecting ranges that fall outside the axis ruler min/max values:

    C#
    Copy Code
    NCartesianChart chart = (NCartesianChart)chartControl.Charts[0];
    NRangeSelection rangeSelection = new NRangeSelection();
    
    rangeSelection.HorizontalValueSnapper = new NAxisRulerClampSnapper();
    rangeSelection.VerticalValueSnapper = new NAxisRulerClampSnapper();
    
    chart.RangeSelections.Add(rangeSelection);
    
    Visual Basic
    Copy Code
    Dim chart As NCartesianChart = chartControl.Charts(0)
    Dim rangeSelection As New NRangeSelection
    
    rangeSelection.HorizontalValueSnapper = New NAxisRulerClampSnapper
    rangeSelection.VerticalValueSnapper = New NAxisRulerClampSnapper
    
    chart.RangeSelections.Add(rangeSelection)
    
     Range Selection Appearance

    You can modify the appearance of the range selection when zoom in or zoom out is performed by touching the ZoomInFillStyle and ZoomInBorderStyle properties respectively:

    C#
    Copy Code
    dataZoomTool.ZoomInFillStyle = new NColorFillStyle(Color.FromArgb(125, Color.Navy));
    dataZoomTool.ZoomInBorderStyle.Color = Color.FromArgb(125, Color.Navy);
    
    Visual Basic
    Copy Code
    dataZoomTool.ZoomInFillStyle = New NColorFillStyle(Color.FromArgb(125, Color.Navy))
    dataZoomTool.ZoomInBorderStyle.Color = Color.FromArgb(125, Color.Navy)
    

    Similarly you need to touch the ZoomOutFillStyle and ZoomOutBorderStyle properties if you want to modify the appearance of the zoom out area.

    Finally you can instruct the chart to reset the axes to non-paged mode (default) always when the user performs a zoom out. This is done by setting the ZoomOutResetsAxes property to true:

    C#
    Copy Code
    dataZoomTool.ZoomOutResetsAxes = true;
    
    Visual Basic
    Copy Code
    dataZoomTool.ZoomOutResetsAxes = True
    
     Animated Zoom

    The data zoom tool allows you to animate the transition from the current chart zoom state and the new one selected by the user. This is achieved by settings the AnimateZooming property to true:

    C#
    Copy Code
    NDataZoomTool dataZoomTool = new NDataZoomTool();
    dataZoomTool.AnimateZooming = true;
    dataZoomTool.AnimationSteps = 10;
    dataZoomTool.AnimationDurationType = AnimationDurationType.MaxSteps;
    Visual Basic
    Copy Code
    Dim dataZoomTool As New NDataZoomTool
    dataZoomTool.AnimateZooming = True
    dataZoomTool.AnimationSteps = 10
    dataZoomTool.AnimationDurationType = AnimationDurationType.MaxSteps

    Note that the code above also modifies the AnimationSteps property controlling how many steps are needed to complete the transition. The duration of each step is controlled from the AnimationInterval property of the chart settins object:

    C#
    Copy Code
    nChartControl1.Settings.AnimationInterval = 100;
    Visual Basic
    Copy Code
    NChartControl.Settings.AnimationInterval = 100
     Mouse Wheel Zoom

    The data zoom tool allows you to specify that the mouse action that activates the tool is the mouse wheel button. This allows the user to zoom in / out the chart using the mouse wheel. The following code snippet shows how to configure the control in order to zoom in / out using the mouse wheel:

    C#
    Copy Code
    NSelectorTool selector = new NSelectorTool();
    selector.Focus = true; // make sure the control gets focus when mouse down occurs
    nChartControl1.Controller.Tools.Add(selector);

    NDataZoomTool dzt = new NDataZoomTool();
    dzt.WheelZoomAtMouse = true;
    dzt.BeginDragMouseCommand = new NMouseCommand(MouseAction.Wheel, MouseButtons.None, 0);
    nChartControl1.Controller.Tools.Add(dzt);
    Visual Basic
    Copy Code
    Dim selector As New NSelectorTool
    selector.Focus = True ' make sure the control gets focus when mouse down occurs
    NChartControl1.Controller.Tools.Add(selector)

    Dim dataZoomTool As New NDataZoomTool
    dataZoomTool.WheelZoomAtMouse = True
    dataZoomTool.BeginDragMouseCommand = New NMouseCommand(MouseAction.Wheel, MouseButtons.None, 0)
    NChartControl1.Controller.Tools.Add(dataZoomTool)
    When the WheelZoomAtMouse property is set to true the control will zoom in relative to the current mouse position over the chart. Otherwise it will zoom in / out relative to the center of the chart plot.

     

    See Also