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 data
4
var data = [
5
{x: 0.6, value: 22, valueError: 8, xError: 0.2},
6
{x: 1.7, value: 55, xLowerError: "6%", xUpperError: "10%"},
7
{x: 2.3, value: 50, valueError: "12%"},
8
{x: 2.6, value: 76, valueUpperError: 7},
9
{x: 2.7, value: 64},
10
{x: 4, value: 71},
11
{x: 4, value: 88, valueLowerError: 6, valueUpperError: 4, xError: 0.4},
12
{x: 4.5, value: 74},
13
{x: 4.9, value: 83}
14
];
15
16
// create a chart
17
var chart = anychart.scatter();
18
19
// create a marker series and set the data
20
var series = chart.marker(data);
21
22
// configure tooltips
23
chart.tooltip().format(function() {
24
var output = "";
25
if (this.xUpperError != 0)
26
output = "xUpperError: " + this.xUpperError;
27
if (this.xLowerError != 0)
28
output = output + "\nxUpperError: " + this.xLowerError;
29
if (this.valueLowerError != 0)
30
output = output + "\nxUpperError: " + this.valueLowerError;
31
if (this.valueUpperError != 0)
32
output = output + "\nxUpperError: " + this.valueUpperError;
33
if (output == "") return "NO ERRORS";
34
return output;
35
});
36
37
// enable major grids
38
chart.xGrid().enabled(true);
39
chart.yGrid().enabled(true);
40
41
// enable minor grids
42
chart.xMinorGrid().enabled(true);
43
chart.yMinorGrid().enabled(true);
44
45
// set the chart title
46
chart.title("Error Chart: Labels and Tooltips (Formatting Functions)");
47
48
// set the container id
49
chart.container("container");
50
51
// initiate drawing the chart
52
chart.draw();
53
});