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
var dataTable = anychart.data.table();
3
// data comes from the function in https://cdn.anychart.com/csv-data/dji-daily-short.js
4
dataTable.addData(get_dji_daily_short_data());
5
6
var firstMapping = dataTable.mapAs({value: 1});
7
var secondMapping = dataTable.mapAs({value: 5});
8
9
var chart = anychart.stock();
10
chart.padding(10, 10, 10, 50);
11
12
var firstPlot = chart.plot(0);
13
firstPlot.legend().titleFormat(function() {return "Compare With SERIES_START"});
14
firstPlot.line(firstMapping);
15
firstPlot.line(secondMapping);
16
17
var firstPlotYScale = firstPlot.yScale();
18
firstPlotYScale.comparisonMode("percent");
19
20
// Set date for the changes zero of the series.
21
firstPlotYScale.compareWith("series-start");
22
23
var secondPlot = chart.plot(1);
24
secondPlot.legend().titleFormat(function() {return "Compare With FIRST_VISIBLE"});
25
secondPlot.line(firstMapping);
26
secondPlot.line(secondMapping);
27
28
var secondPlotYScale = secondPlot.yScale();
29
secondPlotYScale.comparisonMode("percent");
30
31
// Set date for first visible point.
32
secondPlotYScale.compareWith("first-visible");
33
34
var thirdPlot = chart.plot(2);
35
thirdPlot.legend().titleFormat(function() {return "Compare With 24 of April 2008"});
36
thirdPlot.line(firstMapping);
37
thirdPlot.line(secondMapping);
38
39
var thirdPlotYScale = thirdPlot.yScale();
40
thirdPlotYScale.comparisonMode("percent");
41
42
// Set custom date.
43
// Date is 24 of April 2008, set as a JavaScript Timestamp
44
thirdPlotYScale.compareWith(1209081600000);
45
// the following line gives the same result
46
// thirdPlotYScale.compareWith(Date.UTC(2008, 3, 25));
47
48
chart.title("Different Comparison Bases in Percent mode");
49
chart.container("container");
50
chart.draw();
51
52
chart.selectRange("2004-01-02", "2006-01-10");
53
});