In typical usage, the JsViewPortControl displays an "overall chart" that shows the full data range, and connects to the JsChartViewer using JsViewPortControl.setViewer. It can then include a rectangle on the overall chart to represent the viewport in the JsChartViewer. The region outside the rectangle can be dimmed out to highlight the viewport region. If the viewport is updated (such as if the user clicks on the chart while in "Zoom In" mode), the rectangle will also update automatically.
To manipulate the viewport, the user can drag the rectangle to move the viewport (equivalent to scrolling). The user can also resize the viewport by dragging the border of the rectangle (equivalent to zooming), or drag a new rectangular region on the overall chart to be used as the new viewport, or click on a point on the chart to center the viewport at that point.
To use JsViewPortControl in a web page, it is necessary to include the ChartDirector Javascript Library "cdjcv.js" and other supporting files in the web page. Please refer to ChartDirector Javascript Library for details.
| Method | Inherited | Description |
|---|---|---|
| setViewer | (Self) | Associates a JsChartViewer object with this JsViewPortControl object. |
| getViewer | (Self) | Gets the JsChartViewer object provided by the previous JsViewPortControl.setViewer method call. |
| setDragInsideToMove | (Self) | Enables or disables dragging inside the viewport to move it. |
| getDragInsideToMove | (Self) | Checks if dragging inside the viewport to move it is enabled or disabled. |
| setDragBorderToResize | (Self) | Enables or disables dragging the viewport border to resize it. |
| getDragBorderToResize | (Self) | Checks if dragging the viewport border to resize it is enabled or disabled. |
| setDragOutsideToSelect | (Self) | Enables or disables dragging outside the viewport to select a new viewport. |
| getDragOutsideToSelect | (Self) | Checks if dragging outside the viewport to select a new viewport is enabled or disabled. |
| setClickToCenter | (Self) | Enables or disables centering the viewport at the clicked point. |
| getClickToCenter | (Self) | Checks if centering the viewport at the clicked point is enabled or disabled. |
| setViewPortExternalColor | (Self) | Sets the fill color for the region outside the viewport. |
| getViewPortExternalColor | (Self) | Gets the fill color for the region outside the viewport. |
| setViewPortBorderStyle | (Self) | Sets the viewport border style. |
| getViewPortBorderStyle | (Self) | Gets the viewport border style in CSS "border" style format. |
| setSelectionBorderStyle | (Self) | Sets the selection border style. |
| getSelectionBorderStyle | (Self) | Gets the selection border style in CSS "border" style format. |
| setMouseMargin | (Self) | Sets the margin around the viewport border for mouse drag. |