Bollinger BandWidth is an indicator derived from Bollinger Bands. In his book, Bollinger on Bollinger Bands, John Bollinger refers to Bollinger BandWidth as one of two indicators that can be derived from Bollinger Bands. The other indicator is BBands %B.
Non-normalized BandWidth measures the distance, or difference, between the upper band and the lower band. BandWidth decreases as Bollinger Bands narrow and increases as Bollinger Bands widen. Because Bollinger Bands are based on the standard deviation, falling BandWidth reflects decreasing volatility and rising BandWidth reflects increasing volatility.
Mathematical description of the indicator please see at: Mathematical Description of Technical Indicators
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.
BBands Width indicator needs Data Provider with Close or Value fields.
Sample XML of Data Provider, which can be used to create BBands Width indicator:
01 |
<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 | } |
As soon as Data Provider is ready you can add an indicator to a chart.
Unlike BBands themselves - BBands Width indicator is usually shown on the chart below the chart with data (stock data). So we should declare it in another chart. Learn more about charts and layout in Chart Layout article.
XML/JSON for BBands Width declaration, note that there are two charts defined - one is used to show the stock data, and another one contains technical indicator:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<settings> |
04 |
<charts> |
05 |
<chart> |
06 |
<series_list> |
07 |
<series type="Line" data_provider="dpMsft" /> |
08 |
</series_list> |
09 |
</chart> |
10 |
<chart> |
11 |
<technical_indicators> |
12 |
<technical_indicator type="BBandsWidth" data_provider="dpMsft" /> |
13 |
</technical_indicators> |
14 |
</chart> |
15 |
</charts> |
16 |
</settings> |
17 |
</stock> |
01 | { |
02 | settings: { |
03 | charts: [ |
04 | { |
05 | seriesList: [ |
06 | { |
07 | type: "Line", |
08 | dataProvider: "dpMsft" |
09 | } |
10 | ] |
11 | }, |
12 | { |
13 | technicalIndicators: [ |
14 | { |
15 | type: "BBandsWidth", |
16 | dataProvider: "dpMsft" |
17 | } |
18 | ] |
19 | } |
20 | ] |
21 | } |
22 | } |
After all things mentioned above are done, you can create a chart with BBands Width indicator, see basic Live Sample with it below:
Bollinger Bands Width has specific parameters - period and deviation. They are set in <bbands_width_indicator> node, where all settings for BBands Width indicator are set.
XML/JSON for setting BBands Width parameters:
01 |
<technical_indicator type="BBandsWidth" data_provider="dpMsft"> |
02 |
<bbands_width_indicator period="80" deviation="5" /> |
03 |
</technical_indicator> |
01 | { |
02 | type: "BBandsWidth", |
03 | dataProvider: "dpMsft", |
04 | bbandsWidthIndicator: { |
05 | period: 80, |
06 | deviation: 5 |
07 | } |
08 | } |
Live sample below shows BBands Width(80,5):
To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.
By default BBands Width is shown as series of Line type, but you can use almost any of available series types to show it on the chart - Spline, Area or Stick, for example.
BBands Width indicator settings are contained in <bbands_width_indicator> node, also in this node you can put <series> subnode - this node defines how exactly indicator is displayed on the chart. This node is 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:
01 |
<chart> |
02 |
<technical_indicators> |
03 |
<technical_indicator type="BBandsWidth" data_provider="dpMsft"> |
04 |
<bbands_width_indicator period="20" deviation="2"> |
07 |
<area_series> |
10 |
</area_series> |
11 |
</series> |
12 |
</bbands_width_indicator> |
13 |
</technical_indicator> |
14 |
</technical_indicators> |
15 |
</chart> |
01 | { |
02 | technicalIndicators: [ |
03 | { |
04 | type: "BBandsWidth", |
05 | dataProvider: "dpMsft", |
06 | bbandsWidthIndicator: { |
07 | period: 20, |
08 | deviation: 2, |
09 | series: { |
10 | type: "Area", |
11 | color: "DarkRed", |
12 | name: "BBands Width(20,2):", |
13 | areaSeries: { |
14 | fill: { |
15 | color: "%Color", |
16 | opacity: 0.2 |
17 | }, |
18 | line: { |
19 | thickness: 2, |
20 | color: "%Color", |
21 | opacity: 1 |
22 | } |
23 | } |
24 | } |
25 | } |
26 | } |
27 | ] |
28 | } |
Live sample below shows settings shown above:
