Tutorial 53: Zoom and Panning Demo
« on: February 05, 2016, 01:36:13 AM »
This sample will show the Zoom and Panning features available in X/Y charts.
 
Key aspects of this tutorial:
  • Zoom must be enabled using ZoomEnable property.
  • You can choose if zoom applies to both axis or only one (ZoomMode property).
  • Other useful properties: ZoomFactor, ZoomInterval, ZoomOffsetX, ZoomOffsetY.
  • May call to ZoomRestore to restore chart view (reset zoom factor and offset).
  • Once zoom is enabled, end user can control Zoom and Pan using mouse (use mousewheel to zoom in/out and click+drag to pan).
  • Zoom can also be controlled from the context menu as shown in the image below.
Important:
  • Zoom & panning is only available in X/Y charts family by now (X/Y scatter, X/Y line, X/Y spline, ...)
  • Zoom will only work correctly if XAxisScale and YAxisScale is set to fixed.

Steps:
 
1. Create a new Windows application project (C#) and name it Tutorial53_XYZoomAndPan.
2. Add Crossing Charts Library to the toolbox pallete and drag it to Form1.
3. Copy and paste de following code:

Code: [Select]
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using CrossingChartsLibrary;
namespace Tutorial53_XYZoomAndPan
{
public partial class Form1 : Form
{
  public Form1()
  {
    InitializeComponent();
  }
  private void Form1_Load(object sender, EventArgs e)
  {
    // setup chart
    CrossingCharts1.Style = STYLE2D3D.STYLE2D_XY_SPLINE;
    CrossingCharts1.Title = "Zoom and Pan demo";
    CrossingCharts1.ShowValues = false;
    CrossingCharts1.ShowDataTable = false;
    CrossingCharts1.XAxisDividersCount = 5;
    CrossingCharts1.SeriesLineStyle = new Pen[] { new Pen(Color.DarkBlue,1)};
    CrossingCharts1.ShowSurface = false;
    CrossingCharts1.ShowPoints = false;
    CrossingCharts1.ShowLegend = false;
    CrossingCharts1.WallsBackStyle = STYLEWALLBACKGROUND.STYLEWALLBACKGROUND_TRANSPARENT;
 
    // setup x-axis
    CrossingCharts1.XAxisScaleMode = SCALEMODE.SCALEMODE_FIXED;
    CrossingCharts1.XAxisScaleMinimum = 0;
    CrossingCharts1.XAxisScaleMaximum = 500;
    CrossingCharts1.XAxisScaleMinimumDateTime = new DateTime(2009,1,1);
    CrossingCharts1.XAxisScaleMaximumDateTime = new DateTime(2009,12,31);
    CrossingCharts1.ShowDividersX = true;
 
    // setup y-axis
    CrossingCharts1.YAxisDividersCount = 10;
    CrossingCharts1.YAxisLocation = STYLEYAXISLOCATION.STYLEYAXISLOCATION_BOTH;
    CrossingCharts1.YAxisScaleMode = SCALEMODE.SCALEMODE_FIXED;
    CrossingCharts1.YAxisScaleMinimum = -100;
    CrossingCharts1.YAxisScaleMaximum = 100;
 
    // enable zoom and panning feature
    CrossingCharts1.ZoomEnabled = true;
    CrossingCharts1.ZoomMode = ZOOM_MODE.XAXIS_ONLY;
 
    // assign random data using SeriesFactory helper class
    SeriesFactory sf = new SeriesFactory();
    Random rnd = new Random();
    for (int k = 0; k < 500; k++)
    {
      sf.AddPoint(k, rnd.Next(-50, 50));
    }
    CrossingCharts1.Series = sf.Series;
    CrossingCharts1.RefreshChart();
  }
}
}

Results:

« Last Edit: February 16, 2016, 11:25:28 AM by CrossingCharts »