Nevron .NET Vision
Chart for .NET / Getting Started / Integrating ThinWeb Chart / Tools / Data Zoom Tool
In This Topic
    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

    }

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