Nevron .NET Vision Documentation
Data Zoom Tool

The data zoom tool allows the user to select a range to zoom in / out on the client by pressing the mouse over the chart and then dragging the mouse.

Creating a Data Zoom Tool

The following code snippet adds a data zoom tool to the Tools collection of the control:

C#
Copy Code

NThinChartControl1.Controller.Tools.Add(new NDataZoomTool());

Visual Basic
Copy Code

NThinChartControl1.Controller.Tools.Add(new NDataZoomTool())

Setting The Zooming Axes

The data zoom tool by default allows zooming in / out on the PrimaryX and PrimaryY axes of the currently selected chart. To modify this you need to change the XAxisId or YAxisId properties. The following code snippet tells the data zoom to use the Secondary Y axis for zooming:

C#
Copy Code

NDataZoomTool dataZoomTool = new NDataZoomTool();
dataZoomTool.YAxisId = (int)StandardAxis.SecondaryY;
NThinChartControl1.Controller.Tools.Add(dataZoomTool);

Visual Basic
Copy Code

Dim dataZoomTool As New NDataZoomTool()
dataZoomTool.YAxisId =
CType(StandardAxis.SecondaryY, Integer)
NThinChartControl1.Controller.Tools.Add(dataZoomTool)

Allowing X or Y Zooming

In some cases you need to restrict the zoom to only the X or Y axis. This is a common requirement when you have multiple series that scale on a common axis or when you have date time / data on the x axis for example. In this case you should set the AllowXAxisZoom and AllowYAxisZoom properties of the tool according to your preferences. The following code snippet shows how to disable Y axis zooming:

C#
Copy Code

NDataZoomTool dataZoomTool = new NDataZoomTool();
dataZoomTool.AllowXAxisZoom =
true;
dataZoomTool.AllowYAxisZoom =
false;
NThinChartControl1.Controller.Tools.Add(dataZoomTool);

Visual Basic
Copy Code

Dim dataZoomTool As New NDataZoomTool()
dataZoomTool.AllowXAxisZoom =
True
dataZoomTool.AllowYAxisZoom = False
NThinChartControl1.Controller.Tools.Add(dataZoomTool)

Data Zoom Sample

The following code snippet shows how to create a simple XY scatter chart with data zooming and scrolling. The example intercepts the ScrollCallback and DataZoomCallback in order to update the label with the current X / Y ranges:

C#
Copy Code

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

if (!NThinChartControl1.Initialized)
{

NThinChartControl1.Panels.Clear();

// add a label
NLabel label = new NLabel();
label.Dock =
DockStyle.Top;
NThinChartControl1.Panels.Add(label);

// get the default chart
NCartesianChart chart = new NCartesianChart();
NThinChartControl1.Panels.Add(chart);
chart.Dock =
DockStyle.Fill;
chart.BoundsMode =
BoundsMode.Stretch;
chart.Margins =
new NMarginsL(10, 10, 10, 10);
chart.Axis(
StandardAxis.PrimaryX).ScaleConfigurator = new NLinearScaleConfigurator();
chart.Axis(
StandardAxis.PrimaryX).ScrollBar.Visible = true;
chart.Axis(
StandardAxis.PrimaryY).ScrollBar.Visible = true;

// create a XY scatter point
NPointSeries point = new NPointSeries();
chart.Series.Add(point);
point.UseXValues =
true;
point.DataLabelStyle.Visible =
false;

// add some random data
Random rand = new Random();
for (int i = 0; i < 20; i++)
{
point.Values.Add(rand.Next(100));
point.XValues.Add(rand.Next(100));
}

label.Text = FormatLabel(NThinChartControl1, chart.Axis(StandardAxis.PrimaryX), chart.Axis(StandardAxis.PrimaryY));

// set the active chart
NThinChartControl1.Controller.SetActivePanel(chart);
// subscribe for scroll callbackNThinChartControl1.ScrollCallback = new ScrollCallback();

// add data zoom tool
NDataZoomTool dataZoomTool = new NDataZoomTool();
dataZoomTool.DataZoomCallback =
new DataZoomCallback();
NThinChartControl1.Controller.Tools.Add(dataZoomTool);
}
}

private static string FormatLabel(NThinChartControl control, NAxis horzAxis, NAxis vertAxis)
{
control.RecalcLayout();
NRange1DD xRange = horzAxis.Scale.RulerRange;
NRange1DD yRange = vertAxis.Scale.RulerRange;
return "XBegin[" + xRange.Begin.ToString("0.0") + "], XEnd [" + xRange.End.ToString("0.0") + "], YBegin [" + yRange.Begin.ToString("0.0") + "], YEnd [" + yRange.End.ToString("0.0") + "]";

}

[Serializable]
class ScrollCallback : INScrollbarCallback
{

#region INScrollbarCallback Members

public void OnScroll(NThinChartControl control, NCartesianChart chart, NAxis axis)
{
control.Labels[0].Text = FormatLabel(control, chart.Axis(
StandardAxis.PrimaryX), chart.Axis(StandardAxis.PrimaryY));
control.UpdateView();
}

#endregion

}

[Serializable]
class DataZoomCallback : INDataZoomCallback
{

#region INDataZoomCallback Members

public void OnDataZoom(NThinChartControl control, NCartesianChart chart, NAxis horzAxis, NAxis vertAxis)
{
control.Labels[0].Text = FormatLabel(control, horzAxis, vertAxis);
}

#endregion

}

}

Related Examples
Web Forms\ThinWeb\Data Zoom Tool
Mvc\ThinWeb\Data Zoom Tool

 

 


©2017. Nevron Software LLC.

Send Feedback