Version

Indicator Panes

Purpose

This topic demonstrates the Indicator Panes of the igFinancialChart control.

The below screenshot highlights the Indicator Panes of the chart and the drop down that is used to adjust the chart type at run time.

financialchart jquery pane indicator.png

Enabling Indicator Panes

Property Name Type Description

FinancialIndicatorTypeCollection

Gets or Sets the collection of Indicator Types: FinancialIndicatorType.

IndicatorDisplayTypeCollection

Gets or sets the collection of Indicator Display Types: IndicatorDisplayType.

By default the Indicator Panes are not displayed. You can set the indicator types through code as follows:

In JavaScript

$("#financialChart").igFinancialChart({
    dataSource: data,
    indicatorTypes: ["AverageTrueRange", "MassIndex"],
});
$("#financialChart").igFinancialChart("option", "indicatorTypes", ["AverageTrueRange", "MassIndex"]);

Configuring Indicator Panes

Property Name Type Description

number

Gets or sets the IndicatorLongPeriod period which applies only to these indicator types:

MovingAverageConvergenceDivergenceIndicator
AbsoluteVolumeOscillatorIndicator
ChaikinOscillatorIndicator
PercentagePriceOscillatorIndicator
PercentageVolumeOscillatorIndicator

number

Gets or sets the IndicatorPeriod period which applies only to these indicator types:

BollingerBandWidthIndicator
FullStochasticOscillatorIndicator
AverageDirectionalIndexIndicator
AverageTrueRangeIndicator
BollingerBandsOverlay
ChaikinVolatilityIndicator
CommodityChannelIndexIndicator
DetrendedPriceOscillatorIndicator
FastStochasticOscillatorIndicator
ForceIndexIndicator
MoneyFlowIndexIndicator
PriceChannelOverlay
RateOfChangeAndMomentumIndicator
RelativeStrengthIndexIndicator
SlowStochasticOscillatorIndicator
StandardDeviationIndicator
StochRSIIndicator
TRIXIndicator
WilliamsPercentRIndicator

number

Gets or sets the IndicatorShortPeriod period which applies only to these indicator types:

MovingAverageConvergenceDivergenceIndicator
AbsoluteVolumeOscillatorIndicator
ChaikinOscillatorIndicator
PercentagePriceOscillatorIndicator
PercentageVolumeOscillatorIndicator

number

Gets or sets the IndicatorSignalPeriod period which applies only to these indicator types:

MovingAverageConvergenceDivergenceIndicator

number

Gets or sets the IndicatorSmoothingPeriod period which applies only to these indicator types:

FullStochasticOscillatorIndicator

number

Gets or sets the IndicatorMultiplier period which applies only to these indicator types:

BollingerBandWidthIndicator

Styling Indicator Panes

Property Name Type Description

BrushCollection

Gets or sets the palette of brushes to use for coloring of positive values of indicators in order they were defined in IndicatorTypes property

BrushCollection

Gets or sets the palette of brushes to use for coloring of negative values of indicators in order they were defined in IndicatorTypes property

number

Gets or sets the thickness of all indicators

In JavaScript

$("#financialChart").igFinancialChart({
    dataSource: data,
    indicatorTypes: ["AverageTrueRange", "MassIndex"],
    indicatorBrushes: ["Blue"],
    indicatorNegativeBrushes: ["Red"],
    indicatorThickness: 2
});
$("#financialChart").igFinancialChart("option", "indicatorBrushes", ["Blue"]);
$("#financialChart").igFinancialChart("option", "indicatorNegativeBrushes", ["Red"]);
$("#financialChart").igFinancialChart("option", "indicatorThickness", 2);
financialchart jquery pane indicator style.png

Related Content

Topic Purpose

This article is an overview of the different chart panes.

View on GitHub