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
var data = getData();
3
4
var chart = anychart.treeMap(data);
5
chart.title('Click on the chart. You have 3 clicks');
6
chart.listen('click', customListener);
7
8
var counter = 3;
9
10
function customListener(e) {
11
counter--;
12
chart.title('Click on the chart. You have ' + counter + ' clicks');
13
if (counter === 0) {
14
// Removes event listener
15
chart.unlisten('click', customListener);
16
chart.title('You have no more clicks');
17
}
18
}
19
20
chart.container('container');
21
chart.draw();
22
});
23
24
function getData() {
25
return [
26
{
27
name: 'Eurasia',
28
children: [
29
{
30
name: 'Asia', children: [
31
{
32
name: 'Eastern Asia', children: [
33
{name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},
34
{name: 'China', value: 1564116, capital: 'Beijing'},
35
{name: 'Southern Korea', value: 1564116, capital: 'Seoul'},
36
{name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},
37
{name: 'Japan', value: 1564116, capital: 'Tokio'}
38
]
39
}
40
]
41
},
42
{
43
name: 'Europe', children: [
44
{
45
name: 'Northern Europe', children: [
46
{name: 'Finland', value: 338424, capital: 'Helsinki'},
47
{name: 'Great Britain', value: 209331, capital: 'London'},
48
{name: 'Ireland', value: 84421, capital: 'Dublin'},
49
{name: 'Scandinavia', value: 928057}
50
]
51
}
52
]
53
}
54
]
55
}
56
];
57
}