Data Zoom Tool

In This Topic

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

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