This sample is similar to Tutorial 53 but will add one horizontal scrollbar.
 
Key aspects of this tutorial:
  • Zoom must be enabled using ZoomEnable property.
  • Horizontal Scroll Bar must be configured: Visible, Minimum and Maximum values must be set.
  • 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 XY_Chart_w_ScrollBars.
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 XY_Chart_w_ScrollBars {
   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;
         CrossingCharts1.ZoomInterval = 0.5F;
         CrossingCharts1.XAxisScrollBar.Minimum = 0;
         CrossingCharts1.XAxisScrollBar.Maximum = 500;
         CrossingCharts1.XAxisScrollBar.Value = 250;
         CrossingCharts1.XAxisScrollBar.Visible = true;
 
         // 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:31:20 AM by CrossingCharts »