Configuring the Orientation and Direction (igLinearGauge)

Topic Overview

Purpose

This topic explains how to configure the igLinearGauge™ control with vertical scale and/or inverted scale direction.

Required background

The following topics are prerequisites to understanding this topic:

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

• Adding igLinearGauge:This topic explains how to add the igLinearGauge control to a jQuery application.

In this topic

This topic contains the following sections:

• Introduction
  • Scale orientation and direction configuration summary
  • Scale orientation and direction configuration summary chart
• Configuring the Scale Orientation
  • Overview
  • Property settings
  • Example
• Configuring the Scale Direction (Scale Inversion)
  • Overview
  • Property settings
  • Example – inverted direction at horizontal orientation
  • Example – inverted direction at vertical orientation
• Related Content
  • Topics
  • Samples

Introduction

Scale orientation and direction configuration summary

The igLinearGauge control supports both vertical and horizontal orientations of its scale. By default, the scale assumes the horizontal orientation. In the vertical orientation, the scale values increase in an upwards direction with its numbering labels positioned to the left.

It is defined by the orientation property of the control.

The scale direction is the direction in which the values of the scale increase. It can be standard (left-to-right or at horizontal orientation and bottom-to-top at vertical orientation) or inverted (right-to-left or at horizontal orientation and top-to-bottom or at vertical orientation).

Inverted direction at horizontal orientation	Inverted direction at vertical orientation

Scale direction is defined by the isScaleInverted property of the control. The default orientation is standard.

Scale orientation and direction configuration summary chart

The following table explains briefly the configurable aspects of the igLinearGauge’s control orientation and scale inversion and maps them to properties that configure them.

Configuring the Scale Orientation

Overview

The orientation (horizontal or vertical) of the linear gauge is specified by the orientation property of the control.

Property settings

The following table maps the desired configuration to its respective property settings.

Example

The screenshot below demonstrates how the igLinearGauge looks as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$('#igLinearGauge').igLinearGauge({
    width: ”70”,
    height: ”300”,
    orientation: "vertical"
});

Configuring the Scale Direction (Scale Inversion)

Overview

With horizontal orientation, the standard (default) direction of the scale is left-to-right, which means that the scale begins at the left edge of the Graph area and ends at its right edge (the scaleStartExtent indicates an outset from the left edge of the Graph area and the scaleEndExtent – the distance from the left edge of the Graph area to the end of the scale):

When the direction is inverted, the scale begins at the right edge of the Graph area and ends at its left edge (the scaleStartExtent indicates an outset from the right edge of the Graph area and the ScaleEndExtent – the distance from the right edge of the Graph area to the end of the scale):

With vertical orientation, the standard (default) direction of the scale is bottom-to-top, which means that the scale begins at the bottom of the Graph area and ends at its top (the scaleStartExtent indicates an outset from the bottom edge of the Graph area and the scaleEndExtent – the distance from the bottom edge of the Graph area to the end of the scale):

When the direction is inverted, the scale begins at the top edge of the Graph area and ends at its bottom edge (the scaleStartExtent indicates an outset from the top edge of the Graph area and the scaleEndExtent – the distance from the top edge of the Graph area to the end of the scale):

Property settings

The following table maps the desired configuration to its respective property settings.

Example – inverted direction at horizontal orientation

The screenshot below demonstrates how the igLinearGauge looks as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$('#igLinearGauge').igLinearGauge({
    width: “70”,
    height: “300”,
    isScaleInverted: "true"
});

Example – inverted direction at vertical orientation

The screenshot below demonstrates how the igLinearGauge looks as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$('#igLinearGauge').igLinearGauge({
    width: '70',
    height: '300',
    orientation: "vertical", 
    isScaleInverted: "true"
});

Related Content

Topics

• Configuring the Visual Elements (igLinearGauge): This is a group of topics covering in detail the visual elements the igLinearGauge control (like the scale elements, needle and ranges, etc.) and explaining, with code examples, how to configure them.

Samples

The following samples provide additional information related to this topic.

• Vertical Orientation:This sample demonstrates how to change the orientation of the igLinearGauge and how to invert the scale.