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