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
//Data set through table method
3
var data = [
4
{id: 1, parent: null, name: 'Eurasia'},
5
{id: 2, parent: 1, name: 'Asia'},
6
{id: 3, parent: 2, name: 'Eastern Asia'},
7
{id: 4, parent: 3, name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},
8
{id: 5, parent: 3, name: 'China', value: 1564116, capital: 'Beijing'},
9
{id: 6, parent: 3, name: 'Southern Korea', value: 1564116, capital: 'Seoul'},
10
{id: 7, parent: 3, name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},
11
{id: 8, parent: 3, name: 'Japan', value: 1564116, capital: 'Tokio'},
12
{id: 9, parent: 8, name: 'Hokkaido', value: 83400},
13
{id: 10, parent: 9, name: 'Kyushu', value: 35640},
14
{id: 11, parent: 9, name: 'Honshu', value: 230500},
15
{id: 12, parent: 9, name: 'Shikoku', value: 1200},
16
{id: 13, parent: 1, name: 'Europe'},
17
{id: 14, parent: 13, name: 'Northern Europe'},
18
{id: 15, parent: 14, name: 'Finland', value: 338424, capital: 'Helsinki'},
19
{id: 16, parent: 14, name: 'Great Britain', value: 209331, capital: 'London'},
20
{id: 17, parent: 14, name: 'Ireland', value: 84421, capital: 'Dublin'},
21
{id: 18, parent: 14, name: 'Scandinavia', value: 928057},
22
{id: 19, parent: 18, name: 'Sweden', value: 450295, capital: 'Stockholm'},
23
{id: 20, parent: 18, name: 'Norway', value: 385178, capital: 'Oslo'},
24
{id: 21, parent: 18, name: 'Denmark', value: 42923.53, capital: 'Copenhagen'},
25
];
26
27
// set data and data type settings
28
var chart = anychart.treeMap(data, anychart.enums.TreeFillingMethod.AS_TABLE);
29
30
chart.headers().format("{%name}");
31
chart.labels().format("{%name}");
32
chart.tooltip().titleFormat("{%name}");
33
chart.tooltip().format("Area: {%Value} square km");
34
35
chart.title("Setting the data as table");
36
37
chart.container('container');
38
chart.draw();
39
});