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 two data tables
4
var dataTable_1 = anychart.data.table(0);
5
var dataTable_2 = anychart.data.table(0);
6
7
// add data to the first table
8
dataTable_1.addData([
9
["2018-01-01", 512.53],
10
["2018-01-03", 511.22],
11
["2018-01-05", 510.53],
12
["2018-01-07", 511.50],
13
["2018-01-09", 511.70]
14
]);
15
16
// add data to the second table
17
dataTable_2.addData([
18
["2018-01-02", 511.83],
19
["2018-01-04", 510.35],
20
["2018-01-06", 511.43],
21
["2018-01-08", 511.32]
22
]);
23
24
// map the first table
25
var mapping_1 = dataTable_1.mapAs({value: 1});
26
27
// map the second table
28
var mapping_2 = dataTable_2.mapAs({value: 1});
29
30
// create a stock chart
31
var chart = anychart.stock();
32
33
// create a plot and an two column series
34
var column_1 = chart.plot(0).column(mapping_1);
35
var column_2 = chart.plot(0).column(mapping_2);
36
column_1.name("Odd Days");
37
column_2.name("Even Days");
38
39
// set the chart title
40
chart.title("Table Data: Mapping Multiple Tables");
41
42
// set the container id
43
chart.container("container");
44
45
// initiate drawing the chart
46
chart.draw();
47
});