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 data = anychart.data.set([
4
["John" , 10000, 12000, 15000, 20000, 19000],
5
["Jake" , 12000, 15000, 11500, 18350, 11000],
6
["Peter" , 18000, 16000, 13000, 18000, 15000],
7
["James" , 11000, 13000, 14000, 12500, 16000],
8
["Mary" , 9000, 19000, 17200, 15000, 18000]
9
]);
10
11
// map data for the each series
12
var data1 = data.mapAs({x: 0, value: 1});
13
var data2 = data.mapAs({x: 0, value: 2});
14
var data3 = data.mapAs({x: 0, value: 3});
15
var data4 = data.mapAs({x: 0, value: 4});
16
var data5 = data.mapAs({x: 0, value: 5});
17
18
// chart type
19
var chart = anychart.column();
20
21
var series1 = chart.column(data1);
22
var series2 = chart.column(data2);
23
var series3 = chart.column(data3);
24
var series4 = chart.column(data4);
25
var series5 = chart.column(data5);
26
27
series1.name("Year 2008");
28
series2.name("Year 2009");
29
series3.name("Year 2010");
30
series4.name("Year 2011");
31
series5.name("Year 2012");
32
33
// set title
34
chart.title("Managing Tooltip Content");
35
36
var tooltip = chart.tooltip();
37
tooltip.positionMode("point");
38
39
var tooltip1 = series1.tooltip();
40
var tooltip2 = series2.tooltip();
41
var tooltip3 = series3.tooltip();
42
var tooltip4 = series4.tooltip();
43
var tooltip5 = series5.tooltip();
44
45
tooltip1.titleFormat("Manager: {%x}");
46
tooltip2.titleFormat(titleFormatFunction);
47
tooltip3.titleFormat(titleFormatFunction);
48
tooltip4.titleFormat(titleFormatFunction);
49
50
tooltip5.titleFormat(
51
// get formatting function of the first series tooltip
52
tooltip4.titleFormat()
53
);
54
55
tooltipSettings(tooltip1);
56
tooltipSettings(tooltip2);
57
tooltipSettings(tooltip3);
58
tooltipSettings(tooltip4);
59
tooltipSettings(tooltip5);
60
61
function titleFormatFunction(){
62
return "Manager of this store is " + this.x
63
}
64
65
function tooltipSettings(tooltip){
66
tooltip.position("center-top");
67
tooltip.anchor("center-bottom");
68
tooltip.useHtml(true);
69
tooltip.offsetX(0);
70
tooltip.valuePrefix("$");
71
}
72
73
// draw
74
chart.container("container");
75
chart.draw();
76
});