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 stage = anychart.graphics.create('container');
3
4
var data = getData();
5
6
var chart = anychart.treeMap(data);
7
chart.bounds(0, 0, '50%', '100%');
8
chart.title('Serialize chart string to XML');
9
chart.container(stage);
10
chart.draw();
11
12
// Returns chart config as XML string.
13
var xml = chart.toXml();
14
15
var chartFromXml = anychart.fromXml(xml);
16
chartFromXml.bounds('50%', 0, '50%', '100%');
17
chartFromXml.title('Creates chart from XML string');
18
chartFromXml.container(stage);
19
chartFromXml.draw();
20
});
21
22
function getData() {
23
return [
24
{
25
name: 'Eurasia',
26
children: [
27
{
28
name: 'Asia', children: [
29
{
30
name: 'Eastern Asia', children: [
31
{name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},
32
{name: 'China', value: 1564116, capital: 'Beijing'},
33
{name: 'Southern Korea', value: 1564116, capital: 'Seoul'},
34
{name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},
35
{name: 'Japan', value: 1564116, capital: 'Tokio'}
36
]
37
}
38
]
39
},
40
{
41
name: 'Europe', children: [
42
{
43
name: 'Northern Europe', children: [
44
{name: 'Finland', value: 338424, capital: 'Helsinki'},
45
{name: 'Great Britain', value: 209331, capital: 'London'},
46
{name: 'Ireland', value: 84421, capital: 'Dublin'},
47
{name: 'Scandinavia', value: 928057}
48
]
49
}
50
]
51
}
52
]
53
}
54
];
55
}