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
{id: 1, parent: null, name: "Root"},
6
{id: 2, parent: 1, name: "Parent 1"},
7
{id: 3, parent: 2, name: "Child 1-1", value: 150000000},
8
{id: 4, parent: 2, name: "Child 1-2", value: 45000000},
9
{id: 5, parent: 2, name: "Child 1-3", value: 3200000},
10
{id: 6, parent: 1, name: "Parent 2"},
11
{id: 7, parent: 6, name: "Child 2-1", value: 55000000},
12
{id: 8, parent: 6, name: "Child 2-2", value: 10600000},
13
{id: 9, parent: 6, name: "Child 2-3", value: 5200000},
14
{id: 10, parent: 1, name: "Parent 3"},
15
{id: 11, parent: 10, name: "Child 3-1", value: 21000000},
16
{id: 12, parent: 10, name: "Child 3-2", value: 9000000}
17
];
18
19
// create a data tree
20
var treeData = anychart.data.tree(data, "as-table");
21
22
// create a chart and set the data
23
var chart = anychart.treeMap(treeData);
24
25
// set the maximum depth of levels shown
26
chart.maxDepth(2);
27
28
// set the chart title
29
chart.title("Tree Data Model: Table Structure");
30
31
// set the container id
32
chart.container("container");
33
34
// initiate drawing the chart
35
chart.draw();
36
});