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 set
4
var data = anychart.data.set([
5
[0.6, 22, 0.5, 105],
6
[1.7, 55, 1, 109],
7
[2.3, 50, 2.4, 133],
8
[2.6, 76, 2.9, 116],
9
[2.7, 64, 2.4, 119],
10
[4, 71, 4.6, 115],
11
[4, 88, 4.1, 117],
12
[4.5, 74, 3.9, 125],
13
[4.9, 83, 5, 128]
14
]);
15
16
// map the data
17
var seriesData_1 = data.mapAs({x: 0, value: 1});
18
var seriesData_2 = data.mapAs({x: 2, value: 3});
19
20
// create a chart
21
var chart = anychart.scatter();
22
23
// create the first series and set the data
24
var series1 = chart.marker(seriesData_1);
25
26
// create the second series and set the data
27
var series2 = chart.marker(seriesData_2);
28
29
// create error bars on the first series
30
var error1 = series1.error();
31
error1.valueError(8);
32
error1.xError(0.4);
33
34
// configure the appearance of error bars on the first series
35
error1.valueErrorWidth(6);
36
error1.xErrorWidth(0);
37
error1.valueErrorStroke("#6fb6ee", 2);
38
error1.xErrorStroke("#6fb6ee", 2, "2 2", "round");
39
40
// create error bars on the second series
41
var error2 = series2.error();
42
error2.valueLowerError(7);
43
error2.valueUpperError(4);
44
error2.xLowerError(0.1);
45
error2.xUpperError(0.2);
46
47
// configure the appearance of error bars on the second series
48
error2.valueErrorWidth(6);
49
error2.xErrorWidth(6);
50
error2.valueErrorStroke("black", 0.5);
51
error2.xErrorStroke("black", 0.5);
52
53
// enable major grids
54
chart.xGrid().enabled(true);
55
chart.yGrid().enabled(true);
56
57
// enable minor grids
58
chart.xMinorGrid().enabled(true);
59
chart.yMinorGrid().enabled(true);
60
61
// set the chart title
62
chart.title("Error Chart: Appearance");
63
64
// set the container id
65
chart.container("container");
66
67
// initiate drawing the chart
68
chart.draw();
69
});