MACD, which stands for Moving Average Convergence / Divergence, is a technical analysis indicator created by Gerald Appel in the 1960s. It shows the difference between a fast and slow exponential moving average (EMA) of closing prices.
AnyChart Stock allows you to add MFI with desired fast, slow and signal periods settings to any of your charts.
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.
MACD indicator needs Data Provider with Value or Close fields.
Sample XML of Data Provider, which can be used to create MACD indicator:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<data> |
04 |
<data_providers> |
06 |
<data_provider data_set="dataSet1" id="dpMsft"> |
07 |
<fields> |
08 |
<field type="Close" column="4" approximation_type="Close" /> |
09 |
</fields> |
10 |
</data_provider> |
11 |
</general_data_providers> |
12 |
</data_providers> |
13 |
</data> |
14 |
</stock> |
01 | { |
02 | data: { |
03 | dataProviders: { |
04 | generalDataProviders: [ |
05 | { |
06 | dataSet: "dataSet1", |
07 | id: "dpMsft", |
08 | fields: [ |
09 | { |
10 | type: "Close", |
11 | column: 4, |
12 | approximationType: "Close" |
13 | } |
14 | ] |
15 | } |
16 | ] |
17 | } |
18 | } |
19 | } |
As soon as Data Provider is ready you can add an indicator to a chart.
MACD indicator is usually shown on the chart above or 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 for MACD 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="MACD" 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: "MACD", |
16 | dataProvider: "dpMsft" |
17 | } |
18 | ] |
19 | } |
20 | ] |
21 | } |
22 | } |
Live Sample:
MACD has three type specific parameters - fast, slow and signal period. Periods are set in <macd_indicator> node, where all settings for MACD indicator are set.
XML for setting MACD periods:
01 |
<technical_indicator type="MACD" data_provider="dpMsft"> |
02 |
<macd_indicator slow_period="26" fast_period="12" signal_period="9" /> |
03 |
</technical_indicator> |
01 | { |
02 | type: "MACD", |
03 | dataProvider: "dpMsft", |
04 | macdIndicator: { |
05 | slowPeriod: 26, |
06 | fastPeriod: 12, |
07 | signalPeriod: 9 |
08 | } |
09 | } |
As you can see you just need to set fast_period, slow_period and signal_period attributes in <macd_indicator> node, these attributes accept any integer greater than 1.
Live sample below shows classic MACD(26,12) with EMA(9) recommended back in the 1960s by Gerald Appel:
To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.
By default MACD is shown as series of Line type with divergence histogram shown as Stick, but you can use almost any of available series types to show it on the chart.
MACD indicator settings are contained in <macd_indicator>node, also in this node you can put <macd_series>, <signal_series> and <histogram_series> subnodes - these nodes define how exactly indicator is displayed on the chart. These 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:
01 |
<chart> |
02 |
<technical_indicators> |
03 |
<technical_indicator type="MACD" data_provider="dpMsft"> |
04 |
<macd_indicator slow_period="26" fast_period="12" signal_period="9"> |
05 |
<macd_series type="Spline" color="#DC3912"> |
07 |
</macd_series> |
08 |
<signal_series type="Spline" color="#0066DD"> |
10 |
</signal_series> |
11 |
<histogram_series type="SplineArea" color="#4BA437"> |
12 |
<area_series> |
15 |
</area_series> |
16 |
</histogram_series> |
17 |
</macd_indicator> |
18 |
</technical_indicator> |
19 |
</technical_indicators> |
20 |
</chart> |
01 | { |
02 | technicalIndicators: [ |
03 | { |
04 | type: "MACD", |
05 | dataProvider: "dpMsft", |
06 | macdIndicator: { |
07 | slowPeriod: 26, |
08 | fastPeriod: 12, |
09 | signalPeriod: 9, |
10 | macdSeries: { |
11 | type: "Spline", |
12 | color: "#DC3912", |
13 | name: "MACD(26,12)" |
14 | }, |
15 | signalSeries: { |
16 | type: "Spline", |
17 | color: "#0066DD", |
18 | name: "EMA(9)" |
19 | }, |
20 | histogramSeries: { |
21 | type: "SplineArea", |
22 | color: "#4BA437", |
23 | areaSeries: { |
24 | fill: { |
25 | color: "%Color", |
26 | opacity: 0.5 |
27 | }, |
28 | line: { |
29 | color: "DarkColor(%Color)", |
30 | thickness: 1, |
31 | opacity: 1 |
32 | } |
33 | } |
34 | } |
35 | } |
36 | } |
37 | ] |
38 | } |
Live sample below shows settings shown above divergence histogram series is shown as Area:
