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
var chart = anychart.scatter();
4
5
// enable the crosshair
6
var crosshair = chart.crosshair();
7
crosshair.enabled(true);
8
9
// set the label performance
10
var yCrossLabel = chart.crosshair().yLabel();
11
yCrossLabel.format(function() {
12
return this.value + "min.";
13
});
14
var xCrossLabel = chart.crosshair().xLabel();
15
xCrossLabel.format(function(){
16
return this.value + "min."
17
});
18
19
chart.title("Sample Scatter Graph");
20
21
var xScale = chart.xScale();
22
xScale.minimum(1.5);
23
xScale.maximum(5.5);
24
var xTicks = chart.xScale().ticks();
25
xTicks.interval(1);
26
var yScale = chart.yScale();
27
yScale.minimum(40);
28
yScale.maximum(100);
29
var yTicks = chart.yScale().ticks();
30
yTicks.interval(10);
31
32
var yAxis = chart.yAxis();
33
yAxis.title("Time Between Eruptions (Min)");
34
var xAxis = chart.xAxis();
35
xAxis.title("Eruption Duration (Min)");
36
xAxis.drawFirstLabel(false);
37
xAxis.drawLastLabel(false);
38
39
// set chart title text settings
40
chart.title("Scatter Chart with a Crosshair");
41
42
var marker = chart.marker([
43
[4.4, 78],
44
[3.9, 74],
45
[4, 68],
46
[4, 76],
47
[3.5, 80],
48
[4.1, 84],
49
[2.3, 50],
50
[4.7, 93],
51
[1.7, 55],
52
[4.9, 76],
53
[1.7, 58],
54
[4.6, 74],
55
[3.4, 75],
56
[4.3, 80],
57
[1.7, 56],
58
[3.9, 80],
59
[3.7, 69],
60
[3.1, 57],
61
[4, 90],
62
[1.8, 42],
63
[4.1, 91],
64
[1.8, 51],
65
[3.2, 79],
66
[1.9, 53],
67
[4.6, 82],
68
[2, 51],
69
[4.5, 76],
70
[3.9, 82],
71
[4.3, 84],
72
[2.3, 53],
73
[3.8, 86],
74
[1.9, 51],
75
[4.6, 85],
76
[1.8, 45],
77
[4.7, 88],
78
[1.8, 51],
79
[4.6, 80],
80
[1.9, 49],
81
[3.5, 82],
82
[4, 75],
83
[3.7, 73],
84
[3.7, 67],
85
[4.3, 68],
86
[3.6, 86],
87
[3.8, 72],
88
[3.8, 75],
89
[3.8, 75],
90
[2.5, 66],
91
[4.5, 84],
92
[4.1, 70],
93
[3.7, 79],
94
[3.8, 60],
95
[3.4, 86],
96
[4, 71],
97
[2.3, 67],
98
[4.4, 81],
99
[4.1, 76],
100
[4.3, 83],
101
[3.3, 76],
102
[2, 55],
103
[4.3, 73],
104
[2.9, 56],
105
[4.6, 83],
106
[1.9, 57],
107
[3.6, 71],
108
[3.7, 72],
109
[3.7, 77],
110
[1.8, 55],
111
[4.6, 75],
112
[3.5, 73],
113
[4, 70],
114
[3.7, 83],
115
[1.7, 50],
116
[4.6, 95],
117
[1.7, 51],
118
[4, 82],
119
[1.8, 54],
120
[4.4, 83],
121
[1.9, 51],
122
[4.6, 80],
123
[2.9, 78],
124
[3.5, 81],
125
[2, 53],
126
[4.3, 89],
127
[1.8, 44],
128
[4.1, 78],
129
[1.8, 61],
130
[4.7, 73],
131
[4.2, 75],
132
[3.9, 73],
133
[4.3, 76],
134
[1.8, 55],
135
[4.5, 86],
136
[2, 48],
137
[4.2, 77],
138
[4.4, 73],
139
[4.1, 70],
140
[4.1, 88],
141
[4, 75],
142
[4.1, 83],
143
[2.7, 61],
144
[4.6, 78],
145
[1.9, 61],
146
[4.5, 81],
147
[2, 51],
148
[4.8, 80],
149
[4.1, 79],
150
[4.1, 82],
151
[4.2, 80],
152
[4.5, 76],
153
[1.9, 56],
154
[4.7, 82],
155
[2, 47],
156
[4.7, 76],
157
[2.5, 61],
158
[4.3, 75],
159
[4.4, 72],
160
[4.4, 74],
161
[4.3, 69],
162
[4.6, 78],
163
[2.1, 52],
164
[4.8, 91],
165
[4.1, 66],
166
[4, 71],
167
[4, 75],
168
[4.4, 81],
169
[4.1, 77],
170
[4.3, 74],
171
[4, 70],
172
[3.9, 83],
173
[3.2, 53],
174
[4.5, 82],
175
[2.2, 62],
176
[4.7, 73],
177
[4.6, 84],
178
[2.2, 58],
179
[4.8, 82],
180
[4.3, 77],
181
[3.8, 75],
182
[4, 77],
183
[4.1, 77],
184
[1.8, 53],
185
[4.4, 75],
186
[4, 78],
187
[2.2, 51],
188
[5.1, 81],
189
[1.9, 52],
190
[5, 76],
191
[4.4, 73],
192
[4.5, 84],
193
[3.8, 72],
194
[4.3, 89],
195
[4.4, 75],
196
[2.2, 57],
197
[4.8, 81],
198
[1.9, 49],
199
[4.7, 87],
200
[1.8, 43],
201
[4.8, 94],
202
[2, 45],
203
[4.4, 81],
204
[2.5, 59],
205
[4.3, 82],
206
[4.4, 80],
207
[1.9, 54],
208
[4.7, 75],
209
[4.3, 73],
210
[2.2, 57],
211
[4.7, 80],
212
[2.3, 51],
213
[4.6, 77],
214
[3.3, 66],
215
[4.2, 77],
216
[2.9, 60],
217
[4.6, 86],
218
[3.3, 62],
219
[4.2, 75],
220
[2.6, 67],
221
[4.6, 69],
222
[3.7, 84],
223
[1.8, 58],
224
[4.7, 90],
225
[4.5, 82],
226
[4.5, 71],
227
[4.8, 80],
228
[2, 51],
229
[4.8, 80],
230
[1.9, 62],
231
[4.7, 84],
232
[2, 51],
233
[5.1, 81],
234
[4.3, 83],
235
[4.8, 84],
236
[3, 72],
237
[2.1, 54],
238
[4.6, 75],
239
[4, 74],
240
[2.2, 51],
241
[5.1, 91],
242
[2.9, 60],
243
[4.3, 80],
244
[2.1, 54],
245
[4.7, 80],
246
[4.5, 70],
247
[1.7, 60],
248
[4.2, 86],
249
[4.3, 78],
250
[1.7, 51],
251
[4.4, 83],
252
[4.2, 76],
253
[2.2, 51],
254
[4.7, 90],
255
[4, 71],
256
[1.8, 49],
257
[4.7, 88],
258
[1.8, 52],
259
[4.5, 79],
260
[2.1, 61],
261
[4.2, 81],
262
[2.1, 48],
263
[5.2, 84],
264
[2, 63]
265
]);
266
marker.type("triangleup");
267
marker.size(4);
268
marker.hoverSize(7);
269
marker.hoverFill("red");
270
var tooltip = marker.tooltip();
271
tooltip.format(function() {
272
return "Waiting Time: " + this.value + " min.\nDuration: " + this.x + " min.";
273
});
274
275
chart.container("container");
276
chart.draw();
277
});