A simple moving average (SMA) is the unweighted mean of the previous n data points. In technical analysis there are various popular values for n, like 10 days, 40 days, or 200 days. The period selected depends on the kind of movement one is concentrating on, such as short, intermediate, or long term. In any case moving average levels are interpreted as support in a rising market, or resistance in a falling market.
AnyChart Stock allows you to add SMA with desired period 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.
SMA indicator needs Data Provider with Value or Close fields.
Sample XML of Data Provider, which can be used to create SMA 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 | } |
In case if you use Data Provider for OHLC or Candlestick XML looks like that:
01 |
<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 | } |
As soon as Data Provider is ready you can add it to the chart.
SMA indicator is 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 SMA declaration:
01 |
<chart> |
02 |
<series_list> |
03 |
<series type="Line" data_provider="dpMsft" color="#0066DD"> |
04 |
<line_series thickness="2" /> |
06 |
</series> |
07 |
</series_list> |
08 |
<technical_indicators> |
09 |
<technical_indicator type="SMA" 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: "SMA", |
16 | dataProvider: "dpMsft" |
17 | } |
18 | ] |
19 | } |
As you can see SMA 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 SMA indicator:
Simple Moving Average Indicator has only one type specific parameter - period. Period is set in <sma_indicator> node, where all settings for SMA indicator are set.
XML for setting SMA period:
01 |
<technical_indicator type="SMA" data_provider="dpMsft"> |
02 |
<sma_indicator period="20" /> |
03 |
</technical_indicator> |
As you can see you just need to set period attribute in <sma_indicator> node, this attribute accepts any integer greater than 1.
Live sample below shows two SMA: SMA(20) and SMA(80):
To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.
By default SMA 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.
SMA indicator settings are contained in <sma_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 |
<technical_indicator type="SMA" data_provider="dpMsft"> |
02 |
<sma_indicator period="50"> |
04 |
<line_series thickness="2" /> |
06 |
</series> |
07 |
</sma_indicator> |
08 |
</technical_indicator> |
01 | { |
02 | type: "SMA", |
03 | dataProvider: "dpMsft", |
04 | smaIndicator: { |
05 | period: 50, |
06 | series: { |
07 | type: "Spline", |
08 | color: "Green", |
09 | lineSeries: { |
10 | thickness: 2 |
11 | }, |
12 | name: "SMA(50)" |
13 | } |
14 | } |
15 | } |
As you can see we set period, color, series type is set to Spline, line width is set to 2px, and name is set to "SMA(50)".
Live sample below shows settings described above:
Another example of changing visualization of SMA indicator - it is shown as SplineArea:
