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 chart = anychart.scatter();
3
4
chart.title("Extra X- and Y-Axes Simple Sample");
5
6
// setting xScale settings
7
chart.xScale().minimum(-10);
8
chart.xScale().ticks().interval(10);
9
10
// adding and adjusting extra X scale
11
var extraXScale = anychart.scales.linear();
12
extraXScale.minimum(-1000);
13
extraXScale.ticks().interval(5000);
14
15
// adding extra Y scale
16
var extraYScale = anychart.scales.linear();
17
18
// setting yScale settings
19
chart.yScale().ticks().interval(0.5);
20
21
// set yAxis settings
22
chart.yAxis(0).stroke("red");
23
chart.yAxis(0).ticks().stroke("red");
24
chart.yAxis(0).labels().fontColor("red");
25
chart.yAxis(0).title("Amplitude");
26
chart.yAxis(0).title().fontColor("red");
27
28
chart.yAxis(1).enabled(true);
29
chart.yAxis(1).stroke("Black");
30
chart.yAxis(1).ticks().enabled(true);
31
chart.yAxis(1).ticks().stroke("Black");
32
chart.yAxis(1).orientation("right");
33
chart.yAxis(1).scale(extraYScale);
34
chart.yAxis(1).title("Amplitude");
35
36
// setting xAxis settings
37
chart.xAxis(0).stroke("red");
38
chart.xAxis(0).ticks().stroke("red");
39
chart.xAxis(0).ticks().enabled(true);
40
chart.xAxis(0).labels().fontColor("red");
41
chart.xAxis(0).title("Time msec");
42
chart.xAxis(0).title().fontColor("red");
43
44
chart.xAxis(1).enabled(true);
45
chart.xAxis(1).stroke("Black");
46
chart.xAxis(1).ticks().enabled(true);
47
chart.xAxis(1).ticks().stroke("Black");
48
chart.xAxis(1).drawFirstLabel(false);
49
chart.xAxis(1).orientation("top");
50
chart.xAxis(1).scale(extraXScale);
51
chart.xAxis(1).title("Time Sec");
52
53
// setting and adjusting data visualisation
54
series1 = chart.line(getData1());
55
series2 = chart.line(getData2());
56
series2.yScale(extraYScale);
57
series2.xScale(extraXScale);
58
59
chart.tooltip().format("(x,y) = ({%x},{%value})");
60
chart.palette(["Red", "Black"]);
61
62
// adding red line to emphasize zero of extra axis
63
var lineMarker = chart.lineMarker();
64
lineMarker.stroke("1 red");
65
lineMarker.layout("vertical");
66
lineMarker.scale(extraXScale);
67
68
chart.yGrid(true);
69
chart.yGrid().stroke("red 0.3");
70
chart.xGrid(true);
71
chart.xGrid().stroke("red 0.3");
72
73
chart.container("container");
74
chart.draw();
75
});
76
77
// a helper function for storing data
78
function getData1(){
79
return [
80
[0, 2],
81
[1, 0.720403074490853],
82
[2, -0.416146836547142],
83
[3, -0.791993997280356],
84
[4, -0.435762413909075],
85
[5, 0.162092677407558],
86
[6, 0.480085143325183],
87
[7, 0.335067668597024],
88
[8, -0.0582000135234454],
89
[9, -0.331320095230792],
90
[10, -0.279690509692151],
91
[11, 0.00136175322709255],
92
[12, 0.241101131066426],
93
[13, 0.241985808386719],
94
[14, 0.0341843045519584],
95
[15, -0.178750097143252],
96
[16, -0.212813217849641],
97
[17, -0.0579291238003362],
98
[18, 0.132063341648816],
99
[19, 0.188324689178413],
100
[20, 0.0741967385115258],
101
[21, -0.0952572626476988],
102
[22, -0.16666013773244],
103
[23, -0.0852532832533436],
104
[24, 0.0652583088210765],
105
[25, 0.146844861016811],
106
[26, 0.0924170460469486],
107
[27, -0.0402950081012188],
108
[28, -0.128347448841809],
109
[29, -0.0965235522179355],
110
[30, 0.019281431235948],
111
[31, 0.110877861552064],
112
[32, 0.0981439247654718],
113
[33, -0.00151734253977823],
114
[34, -0.0942855860871784],
115
[35, -0.0976964546044872],
116
[36, -0.0134698620660426],
117
[37, 0.0785040053277275],
118
[38, 0.0955073644047295],
119
[39, 0.0260139446204817],
120
[40, -0.0635179106335488]
121
]}
122
123
// a helper function for storing data
124
function getData2(){
125
return [
126
[1000, 0.00100000],
127
[1500, 0.00066667],
128
[2000, 0.00050000],
129
[2500, 0.00040000],
130
[3000, 0.00033333],
131
[3500, 0.00028571],
132
[4000, 0.00025000],
133
[4500, 0.00022222],
134
[5000, 0.00020000],
135
[5500, 0.00018182],
136
[6000, 0.00016667],
137
[6500, 0.00015385],
138
[7000, 0.00014286],
139
[7500, 0.00013333],
140
[8000, 0.00012500],
141
[8500, 0.00011765],
142
[9000, 0.00011111],
143
[9500, 0.00010526],
144
[10000, 0.00010000],
145
[10500, 0.00009524],
146
[11000, 0.00009091],
147
[11500, 0.00008696],
148
[12000, 0.00008333],
149
[12500, 0.00008000],
150
[13000, 0.00007692],
151
[13500, 0.00007407],
152
[14000, 0.00007143],
153
[14500, 0.00006897],
154
[15000, 0.00006667],
155
[15500, 0.00006452],
156
[16000, 0.00006250],
157
[16500, 0.00006061],
158
[17000, 0.00005882],
159
[17500, 0.00005714],
160
[18000, 0.00005556],
161
[18500, 0.00005405],
162
[19000, 0.00005263],
163
[19500, 0.00005128],
164
[20000, 0.00005000],
165
[20500, 0.00004878],
166
[21000, 0.00004762]
167
]}