HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create a data table
4
var dataTable = anychart.data.table(0);
5
6
// add data
7
dataTable.addData([
8
["2015-12-25", 512.53, 514.88, 505.69, 507.34],
9
["2015-12-26", 511.83, 514.98, 505.59, 506.23],
10
["2015-12-27", 511.22, 515.30, 505.49, 506.47],
11
["2015-12-28", 510.35, 515.72, 505.23, 505.80],
12
["2015-12-29", 510.53, 515.86, 505.38, 508.25],
13
["2015-12-30", 511.43, 515.98, 505.66, 507.45],
14
["2015-12-31", 511.50, 515.33, 505.99, 507.98],
15
["2016-01-01", 511.32, 514.29, 505.99, 506.37],
16
["2016-01-02", 511.70, 514.87, 506.18, 506.75]
17
]);
18
19
// map the data for the frist series
20
var mapping_1 = dataTable.mapAs({value: 1});
21
22
// map the data for the second series
23
var mapping_2 = dataTable.mapAs({value: 4});
24
25
// map the data for the tecnical indicator
26
var mapping_3 = dataTable.mapAs({open: 1, high: 2, low: 3, close: 4});
27
28
// create a stock chart
29
var chart = anychart.stock();
30
31
// create the first plot and and two line series
32
var line_1 = chart.plot(0).line(mapping_1);
33
var line_2 = chart.plot(0).line(mapping_2);
34
line_1.name("Open");
35
line_2.name("Close");
36
37
// create the second plot and a williams %r indicator
38
chart.plot(1).yScale().minimum(-100);
39
chart.plot(1).yScale().maximum(0);
40
chart.plot(1).williamsR(mapping_3, 4, "marker");
41
42
// set the chart title
43
chart.title("Table Data: Mapping\nMultiple Series and Technical Indicators");
44
45
// set the container id
46
chart.container("container");
47
48
// initiate drawing the chart
49
chart.draw();
50
});