ChartDirector 5.1 (Java Edition)
Zooming and Scrolling Framework (Windows)
Introduction
The ChartDirector Zooming and Scrolling Framework is a framework for "logical zooming" of charts. "Logical zooming" means the chart is plotted with more details as it is zoomed in, but the chart objects do not necessary become bigger. For example, the font size, line width, symbol size, etc, may remain the same. The chart may even change type or data when it is zoomed in. For example, for a finance chart, it may start as a daily candlestick chart when the time range is long, and becomes a realtime intraday line chart when zoomed to one day.
The main elements of the ChartDirector Zooming and Scrolling Framework include a click and drag user interface to control zooming and scrolling, and a set of methods to manage axis scales. To implement a zoomable and scrollable chart, the charting code would need to be written to create the required chart type based on the axis scales.
The View Port
In the ChartDirector Zooming and Scrolling framework, the view port is used to determine which part of the data range should be plotted.
The view port can be imagined as a rectangular window over the entire XY data range. For example, suppose the full data range is 10 years in the horizontal direction. A view port width of 0.1 means only 10% of the horizontal data range should be plotted. In other words, the chart is zoomed in so that only 1 year of data is visible. The view port left side will determine exactly which year of data that is visible.
The view port position and size can be get and set using the following methods. The full data range is always assumed to be 0 to 1. So the view port position and size should be between 0 to 1.
The Zoom and Scroll User Interface
The
ChartViewer control allows using mouse actions on the chart to control zooming and scrolling. Several mouse usage modes are supported, including drag to scroll, drag to select a region to zoom into, click to zoom in, and click to zoom out. They can be selected using
ChartViewer.setMouseUsage. The zooming and scrolling direction can be horizontal only, vertical only, or both, configurable using
ChartViewer.setZoomDirection and
ChartViewer.setScrollDirection.
When the user performs zooming or scrolling operations,
ChartViewer will update the view port to reflect the new visible region. It will then fire the
ViewPortListener.viewPortChanged event . The event handler can then redraw the chart.
Zoom and Scroll with External Controls
In addition to using mouse actions on the plot area, it is often desirable to have other ways to control zooming and scrolling. For example, in finance charts, there are often buttons that allow the user to jump to the last 30 days of data, which are essentially a type of zooming and scrolling. Sometimes people would like to use scroll bar controls for scrolling and mouse wheel for zooming.
To perform zooming and scrolling using external controls, the controls can update the view port and then fire ViewPortChanged events by using
ChartViewer.updateViewPort. For example, if a scroll bar is used for scrolling, in event handler of the scroll bar, it may update the view port to reflect the current scroll bar position, and then call
ChartViewer.updateViewPort.
The ViewPortChanged Event
The
ViewPortListener.viewPortChanged event occurs when the view port is changed. In the simplest case, the event handler just needs to call the charting code to redraw the chart to reflect the changed view port.
If external controls are used, they may need to be updated to reflect the view port. For example, suppose the user can drag the chart or drag a scroll bar to scroll the chart. If the user drags the chart, the scroll bar would need to be updated too to reflect the new view port position.
In zooming and scrolling, the view port events can be "intermediate events". For example, in "drag to scroll", as the user drags the mouse, the view port will be updated rapidly and generate a lot of ViewPortChanged events. These events are "intermediate events" because the view port is still changing. When the user finishes dragging and releases the mouse, ChartDirector will fire a ViewPortChanged event. Only this "final event" corresponds to a stable view port.
To efficiently handle intermediate events, the ViewPortChanged event handler is called with two boolean flags - needUpdateChart and needUpdateImageMap - to determine if the chart and/or image map needs to be updated. For intermediate events, ChartDirector will indicate only the chart needs update. For the final event, ChartDirector will indicate that the image map needs update. It may indicate the chart needs update if the view port has changed between the last intermediate event and the final event.
If external controls are used to control zooming and scrolling and the chart requires image map, it is suggested the external controls set the needUpdateChart and needUpdateImageMap flags properly when calling
ChartViewer.updateViewPort. However, for some controls, it may be impossible to distinguish between intermediate and final events. One way to handle this case is to delay updating the image map until the mouse moves over the chart. It is because the image map is for configuring hot spots on the chart, so it is not needed until the mouse is over the chart.
Managing Axis Scale
The view port always assumes the full data range to be 0 to 1. In practice, a chart can have multiple x-axes and y-axes, using a combination of date/time, linear and logarithmic scales.
To facilitate conversion between the view port and the axis scale, ChartDirector includes a number of methods as follows:
In typical usage,
ChartViewer.setFullRange is used to define the full data ranges for the axes in the chart.
ChartViewer.getValueAtViewPort and
ChartViewer.getViewPortAtValue can then be used to map between data values and view port positions.
ChartViewer.syncLinearAxisWithViewPort,
ChartViewer.syncLogAxisWithViewPort and
ChartViewer.syncDateAxisWithViewPort can be used to synchronize the axis scale with the view port position.
If
ChartViewer.syncLinearAxisWithViewPort,
ChartViewer.syncLogAxisWithViewPort or
ChartViewer.syncDateAxisWithViewPort is called without first defining the full data range, ChartDirector will automatically configure the axis scale based on the data in the chart, and assume it to be the full data range. This is useful if the full data range is not known but must be inferred from the data.
Zooming and Scrolling Examples
Sample Code | Description
|
---|
Simple Zooming and Scrolling (Windows) | A simple zoomable and scrollable chart with tooltips, using mouse click and drag to control zooming and scrolling.
|
Zooming and Scrolling with Track Line (1) (Windows) | In addition to using mouse click and drag, this example demonstrates using a scroll bar for scrolling, and mouse wheel for zooming. It also includes a track cursor that updates the legend dynamically to display the data values as the mouse cursor moves over the chart.
|
Zooming and Scrolling with Track Line (2) (Windows) | This example extends Zooming and Scrolling with Track Line (1) (Windows) by adding two date picker controls. The user can use them to change the start and end dates of the chart. Conversely, if the start and end dates of the chart are changed by other means (such as using mouse drag to scroll/zoom, mouse wheel or using the scroll bar), the date picker controls will be updated.
|
XY Zooming and Scrolling (Windows) | This example demonstrates zooming and scrolling in both horizontal and vertical directions. In addition to using mouse click and drag, this example demonstrates using a slider and the mouse wheel to control zooming. There is also a "navigation pad" which can be thought as a representation of the view port. You can drag the pad to move the view port around (that is, to perform 2D scrolling). This example also includes a crosshair track cursor with dynamic labels on the x-axis and y-axis showing the mouse cursor position, and an image map for data point tooltips.
|
© 2012 Advanced Software Engineering Limited. All rights reserved.