Nevron .NET Vision
Chart for .NET / Getting Started / Integrating ThinWeb Chart / Tools / Data Pan Tool
In This Topic
    Data Pan Tool
    In This Topic

    The data pan tool allows the user to interactively modify the current zoom range by pressing the mouse over the chart and then dragging.

    Creating a Data Pan Tool

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

    Copy Code

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

    Visual Basic
    Copy Code

    NThinChartControl1.Controller.Tools.Add(New NDataPanTool())

    Setting The Zooming Axes

    The data pan tool by default allows panning of 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 pan to use the Secondary Y axis for panning:

    Copy Code

    NDataZoomTool dataZoomTool = new NDataZoomTool();
    dataZoomTool.YAxisId = (int)StandardAxis.SecondaryY;

    Visual Basic
    Copy Code

    Dim dataZoomTool As New NDataZoomTool()
    dataZoomTool.YAxisId =
    CType(StandardAxis.SecondaryY, Integer)

    Data Pan Sample

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

    Copy Code

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


    protected void Page_Load(object sender, EventArgs e)


    if (!NThinChartControl1.Initialized)



    // add a label

    NLabel label = new NLabel();

    label.Dock = DockStyle.Top;


    // get the default chart

    NCartesianChart chart = new NCartesianChart();


    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();


    point.UseXValues = true;

    point.DataLabelStyle.Visible = false;

    // add some random data

    Random rand = new Random();

    for (int i = 0; i < 100; i++)





    // zoom the axes initially


    chart.Axis(StandardAxis.PrimaryX).PagingView.ZoomIn(new NRange1DD(0, 10), 0.0001);

    chart.Axis(StandardAxis.PrimaryY).PagingView.ZoomIn(new NRange1DD(0, 10), 0.0001);

    // hide the scrollbars

    chart.Axis(StandardAxis.PrimaryX).ScrollBar.Visible = false;

    chart.Axis(StandardAxis.PrimaryY).ScrollBar.Visible = false;

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

    // enable tiling

    NThinChartControl1.ServerSettings.EnableTiledZoom = true;

    // set the active chart


    // add data zoom tool

    NDataPanTool dataZoomTool = new NDataPanTool();

    dataZoomTool.DataPanCallback = new DataPanCallback();




    private static string FormatLabel(NThinChartControl control, NAxis horzAxis, NAxis vertAxis)



    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") + "]";



    class DataPanCallback : INDataPanCallback


    #region INDataPanCallback Members

    public void OnDataPan(NThinChartControl control, NCartesianChart chart, NAxis horzAxis, NAxis vertAxis)


    control.Labels[0].Text = FormatLabel(control, horzAxis, vertAxis);






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