When talking about "zooming", it is common to think about zooming like a digital photograph, in which everything is magnified, but is otherwise exactly the same. The zoom ratio is usually a few times and the same data (the photograph) are used at all zoom levels.

There is a much more powerful type of zooming, like zooming in a map. For example, one may start with a world map, and zoom all the way down to seeing the streets and buildings within a city. The zoom ratio can be in the order of 500000 - 1000000 times. Different presentation method may be used at different scales. For example, the world map may show only terrain information, while at highest zoom ratio the map may show the names of individual streets.

The ChartDirector Zooming and Scrolling Framework is designed based on the second model or zooming. The key features are:

• Virtually unlimited zoom ratio.
  
  For example, one can zoom from 10 years down to 1 second (a zoom ratio of 315 million times).
  
  
• Allows different chart types and data grouping methods at different scales.
  
  For example, to plot temperature for 1 day, one may be interested hourly temperature. On the other hand, to plot the temperature for 1 year, one may be interested in the daily high-low range (eg. using two lines for high and low daily temperatures and fill the region in between) rather than the hourly temperatures.
  
  
• Click and drag to control zooming and scrolling.
  
  The ChartViewer control implements zoom/scroll controls via mouse actions. One may use the mouse to drag to scroll, drag to select a region to zoom into, click to zoom in, and click to zoom out depending on the mouse usage mode (set using ChartViewer.MouseUsage).
  
  
• Allows external controls for zooming and scrolling.
  
  In many applications, it may be desirable to have several controls to control zooming and scrolling. For example, for a time based chart, in addition to use "drag to scroll", one may want to have a date/time picker control to select the start date on the axis (equivalent to scrolling the chart), or to use scroll bars for scrolling, or to use "navigation buttons" (like playing video games) for scrolling.
  

The ChartDirector Zooming and Scrolling framework is based on the concept of a view port.

A view port can be imagined as a rectangular window of an underlying rectangular surface. For example, a chart that has 10 years of data can be imagined as a very long chart. If one only displays one of the year, we can say the view port covers only 10% of the underlying chart.

With the view port concept, scrolling can be handled as moving the view port, while zooming in and out can be handled as changing the view port size.

The ChartViewer control may update the view port based on mouse actions on the plot area. The supported mouse actions are drag to scroll, drag to select a region to zoom into, click to zoom in, and click to zoom out. The handling of mouse actions is configured by using ChartViewer.MouseUsage.

When the view port is updated by mouse actions, ChartViewer will fire the ChartViewer.ViewPortChanged event. It is expected the event handler will update the chart and other controls as necessary.

During drag to scroll, as the mouse is being dragged, ChartViewer will repeatedly update the view port and fire ViewPortChanged events. This allows the chart to be updated continuous to reflect the moving view port. However, for these updates, it is not necessary to update the image map (if any is used) associated with the chart. The image map only needs to be updated when the drag is completed, that is, when the mouse button is released.

The ViewPortChanged event handler is called with two boolean flags - needUpdateChart and needUpdateImageMap - to indicate if the current if the chart and/or image map needs to be updated for the current event.

The ChartDirector Zooming and Scrolling framework allows external controls, such as scroll bars, slide bars, date/time picker controls, text and combo boxes, buttons, etc, to control zooming and scrolling. This is by allowing them to query and modify the view port through various ViewPortNNN properties of the ChartViewer object. After modifying the view port, these controls can fire ViewPortChanged events by using ChartViewer.updateViewPort.

The primary function of the ViewPortChanged event handler is to draw the chart based on the current view port settings.

A typical structure of the draw chart code will be like:

• Copy or retrieve the necessary data (data that are visible in the view port) to data arrays for chart creation.
  
  You may also use all the data without regarding whether they are visible in the view port or not. ChartDirector will automatically clip the data to the view port. However, if there are many data points (which is typical of charts that need to zoom and scroll), it is recommended you do copy only the visible data to the data arrays to improve charting performance.
  
  The sample program Zooming and Scrolling Demonstration (Windows) demonstrates copying the necessary data for charting, while the sample program Zooming and Scrolling Demonstration (2) (Windows) simply uses all the data without regarding the visibility of the data.
  
  
• Aggregate the data if necessary.
  
  For charts that need to zoom or scroll, it is not uncommon to have data series with thousands or even millions of points. However, considering a typical plot area is less than a thousand pixels in width, for most chart types, it is not necessary to plot that many points.
  
  Plotting too many data points will reduce the effective resolution of the chart rather than increasing it. It is like drawing a world map on the screen by drawing each street in each city in detail. Instead of getting a very detail map, one probably get a not too useful map.
  
  In general, for most chart types, the best chart is obtained when the number of data points is about the same as the number of pixels in width. As a rule of thumb, one may try to aggregate the data points together so that the number of points is 50% to 100% of the number of pixels in width.
  
  Aggregation means to group multiple data points together into one point. Common aggregation methods include using averaging, resampling, peak value, summation, etc. The exact method to use depends on your chart type and the nature of the data. For example, in a line chart, one may use averaging as the aggregation method, while for an area chart, one may use the peak value as the aggregation method.
  
  Sometimes, it may be meaningful to aggregate one data series into multiple data series. For example, suppose we have a data series representing the hourly temperature, and we need to plot it for a year (365 x 24 = 8760 points). Instead of plotting the data directly, we may aggregate the data into 3 daily series, representing the maximum, minimum and average temperature of a day. We may even use a color to fill the region between the maximum and minimum lines. The resulting chart will be much for elegant and useful than using the raw data directly.
  
  ChartDirector includes a utility method ArrayMath.aggregate that can be used to conveniently aggregate data. If your data comes from a database, sometimes it is also possible to use the database to aggregate data (using aggregate SQL statements).
  
  The sample program Zooming and Scrolling Demonstration (Windows) demonstrates aggregating the data to keep the number of data points not exceeding the pixel width of the plot area, while the sample program Zooming and Scrolling Demonstration (2) (Windows) does not use data aggregation.
  
  
• Draw the chart with the given data.
  
  There are plenty of sample code elsewhere in this documentation on how to draw various charts with ChartDirector. A special point to note is that the charting code may need to configure the axis scale as according to the view port. In some cases, the axis scale may be determined by auto-scaling when the chart is initially displayed. The axis scale will be saved so as to compute future axis scales when the chart is zoomed in.
  

Apart from drawing the chart, the ViewPortChanged event handler may also need to update external controls to reflect the view port. For example, when the user drags to zoom into a region, one may need to modify the date shown in an external date/time picker control to reflect the updated start date, and similarly update external scroll bars, etc.