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
var tooltip = series.tooltip();
24
tooltip.format(function(point){
25
return "\nxUpperError ? " + point.xUpperError
26
+ "\nxLowerError ? " + point.xLowerError
27
+ "\nvalueLowerError ? " + point.valueLowerError
28
+ "\nvalueUpperError ? " + point.valueUpperError
29
});
30
31
// create major grids and bind them to the X and Y axes
32
chart.grid(0).axis(chart.xAxis());
33
chart.grid(1).axis(chart.yAxis());
34
35
// create minor grids and bind them to the X and Y axes
36
chart.minorGrid(0).axis(chart.xAxis());
37
chart.minorGrid(1).axis(chart.yAxis());
38
39
// set the chart title
40
chart.title("Error Chart: Tooltips");
41
42
// set the container id
43
chart.container("container");
44
45
// initiate drawing the chart
46
chart.draw();
47
});