Volume is one of the basic indicators which shows just the trading volume.
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.
Volume indicator needs Data Provider with Volume field.
Sample XML of Data Provider, which can be used to create Volume 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="Volume" column="5" approximation_type="Average" /> |
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: "Volume", |
11 | column: 5, |
12 | approximationType: "Average" |
13 | } |
14 | ] |
15 | } |
16 | ] |
17 | } |
18 | } |
19 | } |
In the above sample approximation type for Volume field is set to "Average", but for Volume indicator you may find useful to set it to "Sum", like that:
01 |
<data_provider data_set="dataSet1" id="dpMsft"> |
02 |
<fields> |
03 |
<field type="Volume" column="5" approximation_type="Sum" /> |
04 |
</fields> |
05 |
</data_provider> |
You can learn more about approximation types in Data Grouping and Values Approximation article.
As soon as Data Provider is ready you can add an indicator to a chart.
Volume 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 for Volume 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 |
<technical_indicators> |
07 |
<technical_indicator type="Volume" data_provider="dpMsft" /> |
08 |
</technical_indicators> |
09 |
</chart> |
10 |
<chart> |
11 |
<series_list> |
12 |
<series type="Line" data_provider="dpMsft" /> |
13 |
</series_list> |
14 |
</chart> |
15 |
</charts> |
16 |
</settings> |
17 |
</stock> |
01 | { |
02 | settings: { |
03 | charts: [ |
04 | { |
05 | technicalIndicators: [ |
06 | { |
07 | type: "Volume", |
08 | dataProvider: "dpMsft" |
09 | } |
10 | ] |
11 | }, |
12 | { |
13 | seriesList: [ |
14 | { |
15 | type: "Line", |
16 | dataProvider: "dpMsft" |
17 | } |
18 | ] |
19 | } |
20 | ] |
21 | } |
22 | } |
Live Sample:
Adding Volume indicator to the same chart is pretty much the same, but you need to, which is obvious, declare it in the same chart and create an extra axis for it, because volume is measured in different units.
So, the declaration of Volume indicator in the same chart may look like that:
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 |
<technical_indicators> |
07 |
<technical_indicator type="Volume" data_provider="dpMsft" axis="extra1" /> |
08 |
</technical_indicators> |
09 |
<series_list> |
10 |
<series type="Line" data_provider="dpMsft" /> |
11 |
</series_list> |
12 |
<value_axes> |
13 |
<extra> |
15 |
<labels> |
16 |
<format><![CDATA[{%Value}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false}]]></format> |
17 |
</labels> |
18 |
<scale minimum_mode="CustomValue" minimum="0" /> |
19 |
</axis> |
20 |
</extra> |
21 |
</value_axes> |
22 |
</chart> |
23 |
</charts> |
24 |
</settings> |
25 |
</stock> |
01 | { |
02 | settings: { |
03 | charts: [ |
04 | { |
05 | technicalIndicators: [ |
06 | { |
07 | type: "Volume", |
08 | dataProvider: "dpMsft", |
09 | axis: "extra1" |
10 | } |
11 | ], |
12 | seriesList: [ |
13 | { |
14 | type: "Line", |
15 | dataProvider: "dpMsft" |
16 | } |
17 | ], |
18 | valueAxes: { |
19 | extra: [ |
20 | { |
21 | id: "extra1", |
22 | position: "Right", |
23 | offset: 5, |
24 | labels: { |
25 | format: "{%Value}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false}" |
26 | }, |
27 | scale: { |
28 | minimumMode: "CustomValue", |
29 | minimum: 0 |
30 | } |
31 | } |
32 | ] |
33 | } |
34 | } |
35 | ] |
36 | } |
37 | } |
As you can see we have defined indicator and extra Y axis and we attached indicator to the axis using axis attribute of <technical_indicator> node. As the result, we can create a chart like shown in a live sample below.
Note: scale_start_ratio and scale_end_ratio scale attributes are used in this sample to make volume indicator occupy only 20% of the drawing area. Read more about these attributes at: Y-Axes Settings: Limiting Scale Draw Region
Due to the nature of Volume indicator it is supposed to show large values - millions and billions, but very long labels with big numbers are very hard to read and use that is why it may be useful to use values scaling in labels formatting, like we do in all samples in this article:
01 | { |
02 | labels: { |
03 | format: "{%Value}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false}" |
04 | }, |
05 | scale: { |
06 | minimumMode: "CustomValue", |
07 | minimum: 0 |
08 | } |
09 | } |
This elegant representation of big numbers allows us to see axis labels and conform them with general look and feel of compact charts. If you want to learn more about scaling and labels formatting, please see:
To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.
By default Volume is shown as series of Stick type, but you can use almost any of available series types to show it on the chart - Spline, Area or Bar, for example.
Volume indicator settings are contained in <volume_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="Volume" data_provider="dpMsft"> |
04 |
<volume_indicator> |
07 |
</series> |
08 |
</volume_indicator> |
09 |
</technical_indicator> |
10 |
</technical_indicators> |
11 |
</chart> |
01 | { |
02 | technicalIndicators: [ |
03 | { |
04 | type: "Volume", |
05 | dataProvider: "dpMsft", |
06 | volumeIndicator: { |
07 | series: { |
08 | type: "Bar", |
09 | color: "#89139B", |
10 | name: "Volume" |
11 | } |
12 | } |
13 | } |
14 | ] |
15 | } |
Live sample below shows settings shown above:
