ChartDirector 6.0 (ASP/COM/VB Edition)

Zooming and Scrolling Framework (Windows)

NOTE: This section describes Zooming and Scrolling Framework for Windows applications only. For web applications, please refer to Zooming and Scrolling Framework (Web).


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:

The View Port

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 ViewPortChanged Event

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.

Updating View Port with External Controls

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.

ViewPortChanged Event Handler

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:

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.