Version

Configuring the Navigation Features (igDataChart)

Topic Overview

Purpose

This topic explains, with code examples, how to configure navigation features of the igDataChart™ control and how to use its API to define the position and size of the visible portion of the chart.

Required background

The following topics are prerequisites to understanding this topic:

  • igDataChart Overview: This topic provides conceptual information about the igDataChart control including its main features, minimum requirements for using charts and user functionality.

  • Adding igDataChart: This topic demonstrates how to add the igDataChart control to a page and bind it to data.

  • Binding igDataChart to Data: This topic demonstrates how to bind the igDataChart control to various data sources (JavaScript array, IQueryable<T>, web service).

In this topic

This topic contains the following sections:

Introduction

Navigation features summary

The igDataChart control provides an extensive set of navigation features along with options and methods for using them in your code.

When enabled the Overview Plus Detail (OPD) panel appears on the lower right corner of the chart. It shows a thumbnail of the entire chart and contains buttons and slider for zooming. Additionally, you can drag the rectangle of the current view across the panel to position it on different regions.

The user can perform zooming in and out with mouse scroll or Page Up/Down keys, panning with mouse drag or touch and drag, and other navigational actions all being controlled by option settings. For reference for all interactive features see igDataChart Overview: User Interaction and Usability.

As a developer, you can use the igDataChart’s options and methods to set the current chart position and get the coordinates of the current view, in various ways, as the user navigates to different regions. You can either present a specific view at initialization or change the view at runtime depending on the user input or dynamic actions.

Navigation Features Configuration Summary

Navigation features configuration summary chart

The following table lists the configurable aspects of the igDataChart control regarding navigation features.

Configurable aspect Details Properties
OPD panel visibility By default, the OPD panel is not shown. When configured to display, the OPD panel is shown in the lower right corner of the chart. In JavaScript:
  • overviewPlusDetailPaneVisibility
    In ASP.NET MVC:
  • OverviewPlusDetailPaneVisibility()
    		•
    Default interaction By default, panning is not allowed and zooming is the default dragging interaction. You can configure panning to be the default dragging interaction. In JavaScript:
  • defaultInteraction
    In ASP.NET MVC:
  • DefaultInteraction()
    		•
    Panning modifier key Modifier key to use when panning is not the default interaction. In JavaScript:
  • panModifier
    In ASP.NET MVC:
  • PanModifier()
    		•
    Zooming modifier key Modifier key to use when zooming is not the default interaction. By default, the Ctrl key switches to zooming. In JavaScript:
  • dragModifier
    In ASP.NET MVC:
  • DragModifier()
    		•
    Zooming Vertical or/and horizontal zoom can be enabled or disabled, individually or at the same time. In JavaScript:
  • horizontalZoomable
  • verticalZoomable
    In ASP.NET MVC:
  • HorizontalZoomable()
  • VerticalZoomable()
    		•
    Setting the visible portion of the chart Set the coordinates and size of the visible portion of the chart you want displayed. In JavaScript:
  • windowRect
    In ASP.NET MVC:
  • WindowRect()
    		•

    Code Example

    This sample demonstrates various navigation methods available in the jQuery chart. Panning and zooming through the control’s content can be performed using built-in keyboard navigation (Arrows, Page Up/Down, Home key), built-in mouse navigation (Shift + mouse drag, mouse scroll, mouse down + mouse drag), and the overview plus detail pane, as well as from code-behind using the control's window position and scale properties.

    Chart Navigation

    Related Content

    Topics

    The following topics provide additional information related to this topic.

    View on GitHub