Bollinger Bands (BBands)

Overview

Bollinger Bands (BBands) are a technical analysis tool invented by John Bollinger in the 1980s. Having evolved from the concept of trading bands, Bollinger Bands can be used to measure the highness or lowness of the price relative to previous trades.

AnyChart Stock allows you to add BBands with desired parameters.

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

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

BBands indicator needs Data Provider with Value or Close fields.

Sample XML of Data Provider, which can be used to create BBands indicator:

XML/JSON Syntax
Plain code
01 <data_providers>
02   <general_data_providers>
03     <data_provider data_set="dataSet1" id="dpMsft">
04       <fields>
05         <field type="Close" column="4" approximation_type="Close" />
06       </fields>
07     </data_provider>
08   </general_data_providers>
09 </data_providers>
01{
02  generalDataProviders: [
03    {
04      dataSet: "dataSet1",
05      id: "dpMsft",
06      fields: [
07        {
08          type: "Close",
09          column: 4,
10          approximationType: "Close"
11        }
12      ]
13    }
14  ]
15}

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

XML/JSON Syntax
Plain code
01 <data_providers>
02   <general_data_providers>
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>
11   </general_data_providers>
12 </data_providers>
01{
02  generalDataProviders: [
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.

BBands 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 for BBands 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>
08   <technical_indicators>
09     <technical_indicator type="BBands" data_provider="dpMsft" />
10   </technical_indicators>
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  ],
13  technicalIndicators: [
14    {
15      type: "BBands",
16      dataProvider: "dpMsft"
17    }
18  ]
19}

As you can see BBands 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 BBands indicator:

Live Sample:  Technical Indicators - Adding BBands to a Chart

Another Sample shows BBands with Candlestick series:

Live Sample:  Technical Indicators - Adding BBands to a Candlestick Chart

to top

Indicator parameters

Bollinger Bands has specific parameters - period and deviation. They are set in <bbands_indicator> node, where all settings for BBands indicator are set.

XML for setting BBands parameters:

XML/JSON Syntax
Plain code
01{
02  type: "BBands",
03  dataProvider: "dpMsft",
04  bbandsIndicator: {
05    period: 80,
06    deviation: 5
07  }
08}

Live sample below shows BBands(80,5):

Live Sample:  Technical Indicators - BBands 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 BBands are shown as Lines, but you can use almost any of available series types to show it on the chart.

BBands indicator settings are contained in <bbands_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 for changing indicator visualization:

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

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

Live sample below shows settings described above:

Live Sample:  Technical Indicators - BBands Visualization Settings

to top

Visualization using RangeArea, RangeSplineArea or RangeBar

You can use RangeArea, RangeSplineArea or RangeBar area series to display Bollinger Bands (this feature is introduced in version 1.1.0).

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: "BBands",
03  dataProvider: "dpMsft",
04  bbandsIndicator: {
05    useRangeBasedSeries: true
06  }
07}

As you can see use_range_based_series should be set to true to use this type of BBands 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="BBands" data_provider="dpMsft">
02   <bbands_indicator period="20" deviation="2" use_range_based_series="true">
03     <range_based_series type="RangeSplineArea" color="#DB2A0E">
04       <name><![CDATA[BBands(20,2)]]></name>
05     </range_based_series>
06   </bbands_indicator>
07 </technical_indicator>
01{
02  type: "BBands",
03  dataProvider: "dpMsft",
04  bbandsIndicator: {
05    period: 20,
06    deviation: 2,
07    useRangeBasedSeries: true,
08    rangeBasedSeries: {
09      type: "RangeSplineArea",
10      color: "#DB2A0E",
11      name: "BBands(20,2)"
12    }
13  }
14}

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

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

to top