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
{name: "World", children: [
6
{name: "Asia", children: [
7
{name: "East", value: 1000},
8
{name: "Southern", value: 803},
9
{name: "Southeast", value: 415},
10
{name: "Western", value: 182},
11
{name: "Central", value: 36}
12
]},
13
{name: "America", children: [
14
{name: "North", value: 346},
15
{name: "South", value: 316},
16
{name: "Central", value: 114},
17
{name: "Caribbean", value: 23}
18
]},
19
{name: "Europe", children: [
20
{name: "Eastern", value: 233},
21
{name: "Western", value: 183},
22
{name: "Southern", value: 135},
23
{name: "Northern", value: 100}
24
]},
25
{name: "Africa", children: [
26
{name: "Western", value: 158},
27
{name: "Eastern", value: 140},
28
{name: "Northern", value: 121},
29
{name: "Southern", value: 34},
30
{name: "Middle", value: 20}
31
]},
32
{name: "Oceania", children: [
33
{name: "Oceania", value: 29}
34
]}
35
]}
36
];
37
38
// create a data tree
39
var treeData = anychart.data.tree(data, "as-tree");
40
41
// create a treemap chart visualizing the data tree
42
var chart = anychart.treeMap(treeData);
43
44
// add a title for the chart
45
chart.title("Internet Audience Worldwide (in million users)");
46
47
// specify the container id
48
chart.container("container");
49
50
// draw the chart
51
chart.draw();
52
53
});