datachart-navigating-chart-using-overview-plus-detail-pane.adoc

Navigating Chart Using Overview Plus Detail Pane

Topic Overview

Purpose

This topic provides information how to use the xamOverviewPlusDetailPane™ control to navigate content in the {DataChartName}™ control.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic	Purpose
{DataChartName}	This topic provides an overview of key features in the {DataChartName} control.
Chart Navigation	This topic provides information on using navigation in the {DataChartName} control.

In this topic

This topic contains the following sections

• Chart Overview Pane

  • Introduction

  • Preview

  • Example

• User Interaction and Usability

  • User interactions summary

  • Zooming chart incrementally

  • Zooming chart to specific level

  • Resetting chart to 100% zoom level

  • Panning chart in all directions

  • Panning to specific region of chart

  • Changing mouse drag interaction with chart

• Related Content

Chart Overview Pane

Introduction

In the {DataChartName} control, an overview of chart content is represented by the xamOverviewPlusDetailPane control. This control provides a preview of all types of supported series as well as navigation functionalities.

Preview

The following is previews of the xamOverviewPlusDetailPane control with an overview of the {DataChartName} control displaying financial data using FinancialPriceSeries.

Example

The following code demonstrates how to display the xamOverviewPlusDetailPane control in upper right corner of the {DataChartName} control.

User Interaction and Usability

User interactions summary

The following table summarizes the user interaction capabilities of the xamOverviewPlusDetailPane control.

The user can…	Using…	Details
Zoom a chart incrementally	The mouse scroll wheel or zoom in/out buttons of the xamOverviewPlusDetailPane control.	Clicking on the zoom in/out buttons of the xamOverviewPlusDetailPane control or scrolling mouse wheel over the preview area zooms in/out the chart content.
Zoom a chart to a specific level	The zoom slider of the xamOverviewPlusDetailPane control.	Changing the zoom slider of the xamOverviewPlusDetailPane control zooms in/out the chart content to a specific zoom level.
Reset a chart to 100% zoom level	The zoom reset button of the xamOverviewPlusDetailPane control.	Clicking on the zoom reset button of the xamOverviewPlusDetailPane control resets the chart to its 100% zoom level.
Pan chart in all directions	The window rectangle of the xamOverviewPlusDetailPane control.	Dragging the window rectangle in preview area of the xamOverviewPlusDetailPane control pans the chart content in a given direction.
Pan to a specific region of a chart	The preview area of the xamOverviewPlusDetailPane control.	Clicking outside of the window rectangle in preview area of the xamOverviewPlusDetailPane control pans the chart content to chart region where the mouse cursor was clicked.
Change mouse drag interaction with a chart	The cursor button of the xamOverviewPlusDetailPane control.	Clicking on the cursor button of the xamOverviewPlusDetailPane control changes mouse drag interaction with chart to pan on mouse dragging or to zoom on mouse dragging interactions.

Zooming a chart incrementally

The following picture illustrates how to zoom chart incrementally using the mouse zoom in/out buttons of the xamOverviewPlusDetailPane control.

Zooming a chart to a specific level

The following picture illustrates how to zoom chart to a specific level using the zoom slider of the xamOverviewPlusDetailPane control.

Resetting a chart to 100% zoom level

The following picture illustrates how to chart to 100% zoom level using the zoom reset button of the xamOverviewPlusDetailPane control.

Panning a chart in all directions

The following picture illustrates how to pan chart in all directions using the window rectangle of the xamOverviewPlusDetailPane control.

Panning to a specific region of a chart

The following picture illustrates how to pan chart to a specific region of chart using the window rectangle of the xamOverviewPlusDetailPane control.

Changing mouse drag interaction with a chart

The following picture illustrates how to change a mouse drag interaction with a chart using the cursor button of the xamOverviewPlusDetailPane control.

Related Content

Topics

The following topics provide additional information related to this topic.

Topic	Purpose
Navigating Chart Using Code	This topic provides information