Price Channels Indicator

Overview

Price Channels are lines set above and below the price of a security. The upper channel is set at the x-period high and the lower channel is set at the x-period low. For a 20-day Price Channel, the upper channel would equal the 20-day high and the lower channel would equal the 20-day low. The dotted centerline is the midpoint between the two channel lines. Price Channels can be used to identify upward thrusts that signal the start of an uptrend or downward plunges that signal the start of a downtrend. Price Channels can also be used to identify overbought or oversold levels within a bigger downtrend or uptrend.

AnyChart Stock allows you to add Price Channels Indicator with desired period.

Mathematical description of the indicator please see at: Mathematical Description of Technical Indicators

Illustration below shows how Price Channels indicator looks like in AnyStock:

AnyChart Stock Price Channels Indicator

As you can see, indicator consists of three series: Upper Channel, Lower Channel and Central Line, the latter is the difference between Upper Channel and Lower Channel. Below you will find all settings available for Price Channels.

to top

Adding indicator

To add any indicator to the chart, you need to use Data Provider with the fields required by the indicator. When such Data Provider is ready - you can add indicator to the chart.

Preparing Data Provider

Price Channels indicator needs Data Provider with High and Low fields.

Sample XML/JSON of Data Provider, which can be used to create Price Channels indicator:

XML/JSON Syntax
Plain code
03     <data_provider data_set="dataSet1" id="dpMsft">
04       <fields>
05         <field type="High" column="2" approximation_type="High" />
06         <field type="Low" column="3" approximation_type="Low" />
07       </fields>
08     </data_provider>
01{
03    {
04      dataSet: "dataSet1",
05      id: "dpMsft",
06      fields: [
07        {
08          type: "High",
09          column: 2,
10          approximationType: "High"
11        },
12        {
13          type: "Low",
14          column: 3,
15          approximationType: "Low"
16        }
17      ]
18    }
19  ]
20}

In case if you use Data Provider for OHLC or Candlestick XML/JSON looks like that:

XML/JSON Syntax
Plain code
03     <data_provider data_set="dataSet1" id="dp1">
04       <fields>
05         <field type="Open" column="1" approximation_type="Open" />
06         <field type="High" column="2" approximation_type="High" />
07         <field type="Low" column="3" approximation_type="Low" />
08         <field type="Close" column="4" approximation_type="Close" />
09       </fields>
10     </data_provider>
01{
03    {
04      dataSet: "dataSet1",
05      id: "dp1",
06      fields: [
07        {
08          type: "Open",
09          column: 1,
10          approximationType: "Open"
11        },
12        {
13          type: "High",
14          column: 2,
15          approximationType: "High"
16        },
17        {
18          type: "Low",
19          column: 3,
20          approximationType: "Low"
21        },
22        {
23          type: "Close",
24          column: 4,
25          approximationType: "Close"
26        }
27      ]
28    }
29  ]
30}

to top

Indicator Declaration

As soon as Data Provider is ready you can add it to the chart.

Price Channels indicator usually used as an Overlay indicator and displayed on the same chart with data series (stock data). So we should declare it in the chart where series is displayed.

XML/JSON for Price Channels declaration:

XML/JSON Syntax
Plain code
01 <chart>
02   <series_list>
03     <series type="Line" data_provider="dpMsft" color="#0066DD">
04       <line_series thickness="2" />
05       <name><![CDATA[MSFT]]></name>
06     </series>
07   </series_list>
09     <technical_indicator type="PriceChannels" data_provider="dpMsft" />
11 </chart>
01{
02  seriesList: [
03    {
04      type: "Line",
05      dataProvider: "dpMsft",
06      color: "#0066DD",
07      lineSeries: {
08        thickness: 2
09      },
10      name: "MSFT"
11    }
12  ],
14    {
15      type: "PriceChannels",
16      dataProvider: "dpMsft"
17    }
18  ]
19}

As you can see PriceChannels type is set to indicator using type attribute, and data_provider attribute specifies data provider with series and indicator data.

Live sample of the chart with Price Channels indicator:

Live Sample:  Technical Indicators - Adding Price Channels to a Chart

Another Sample shows Price Channels indicator with Candlestick series:

Live Sample:  Technical Indicators - Adding Price Channels to a Candlestick Chart

to top

Indicator parameters

Price Channels indicator has a specific parameter - period. This parameter is set in <price_channels_indicator> node, where all settings for Price Channels indicator are set.

XML/JSON for setting period parameter:

XML/JSON Syntax
Plain code
01 <technical_indicator type="PriceChannels" data_provider="dpMsft">
01{
02  type: "PriceChannels",
03  dataProvider: "dpMsft",
05    period: 25
06  }
07}

Live sample below shows Price Channels(25):

Live Sample:  Technical Indicators - Price Channels Parameters

to top

Visualization using lines

To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.

By default upper channel and lower channel are shown as Lines, but you can use almost any of available series types to show it on the chart, for example, Spline or StepLine types.

Price Channels indicator settings are contained in <price_channels_indicator> node, also in this node you can put <upper_series> and <lower_series> subnodes - these nodes define how exactly indicator is displayed on the chart. Nodes are identical to <series> node used to describe data series, so you can do with indicator anything you can do with series.

Sample XML/JSON for changing indicator visualization:

XML/JSON Syntax
Plain code
01 <technical_indicator type="PriceChannels" data_provider="dpMsft">
03     <upper_series type="Spline" color="Green">
04       <line_series thickness="2" opacity="0.8" />
05       <name><![CDATA[PC(20)]]></name>
06     </upper_series>
07     <lower_series type="Spline" color="DarkRed">
08       <line_series thickness="2" opacity="0.8" />
09       <name />
10     </lower_series>
01{
02  type: "PriceChannels",
03  dataProvider: "dpMsft",
05    period: 20,
06    upperSeries: {
07      type: "Spline",
08      color: "Green",
09      lineSeries: {
10        thickness: 2,
11        opacity: 0.8
12      },
13      name: "PC(20)"
14    },
15    lowerSeries: {
16      type: "Spline",
17      color: "DarkRed",
18      lineSeries: {
19        thickness: 2,
20        opacity: 0.8
21      },
22      name: ""
23    }
24  }
25}

As you can see we changed visualization of upper and lower lines.

Live sample below shows settings described above:

Live Sample:  Technical Indicators - Price Channels Visualization Settings

to top

Visualization using RangeArea, RangeSplineArea or RangeBar

You can use RangeArea, RangeSplineArea or RangeBar area series to display Price Channel indicator's upper and lower channels.

To use these types of series, which need two values to be displayed, you have to enable special mode, as shown below:

XML/JSON Syntax
Plain code
01{
02  type: "PriceChannels",
03  dataProvider: "dpMsft",
05    useRangeBasedSeries: true
06  }
07}

As you can see use_range_based_series should be set to true to use this type of Price Channels visualization. When this flag is set to true you can use <range_based_series> node to set series type and configure it, along with legend, tooltip and so on. Sample series configuration (color, name, type) is shown below:

XML/JSON Syntax
Plain code
01 <technical_indicator type="PriceChannels" data_provider="dpMsft">
03     <range_based_series type="RangeArea" color="#DB2A0E">
04       <name><![CDATA[Price Channels(20)]]></name>
05     </range_based_series>
01{
02  type: "PriceChannels",
03  dataProvider: "dpMsft",
05    period: 20,
06    useRangeBasedSeries: true,
07    rangeBasedSeries: {
08      type: "RangeArea",
09      color: "#DB2A0E",
10      name: "Price Channels(20)"
11    }
12  }
13}

And here is a live sample with Price Channels drawn as RangeArea and legend configured accordingly:

Live Sample:  Technical Indicators - Price Channels Visualization using range based series types

to top

Turning off Central Line

By default central line is displayed in Price Channels, if you don't want to show it you need to disable elements, that visualize it.

Sample XML/JSON snippet below shows how to do that:

XML/JSON Syntax
Plain code
01 <technical_indicator type="PriceChannels" data_provider="dpMsft">
03     <center_series>
04       <line_series opacity="0" />
05       <marker enabled="false" />
06       <legend_item enabled="false" />
07     </center_series>
01{
02  type: "PriceChannels",
03  dataProvider: "dpMsft",
05    centerSeries: {
06      lineSeries: {
07        opacity: 0
08      },
09      marker: {
10        enabled: false
11      },
12      legendItem: {
13        enabled: false
14      }
15    }
16  }
17}

Live sample below shows Price Channels indicator without central line:

Live Sample:  Technical Indicators - Price Channels turning off central line

to top