HTMLcopy
1
<div id="container"></div>
2
<div style="position: absolute; top: 40px; left: 60%; width: 31%;">
3
<input style="margin-bottom: 10px;" type="button" value="getPngBase64String" onclick="getPngBase64String()">
4
<textarea style="width: 100%;" rows="5" cols="70" id="getPngBase64String"></textarea>
5
</div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
var chart;
2
anychart.onDocumentReady(function () {
3
var data = getData();
4
5
chart = anychart.sunburst(data, 'as-table');
6
chart.margin().right('15%');
7
chart.title('Returns PNG as base64 string');
8
chart.container('container');
9
chart.draw();
10
});
11
12
function getPngBase64String() {
13
14
// Get PNG as base64 string.
15
chart.getPngBase64String(function (response) {
16
var base64String = document.getElementById('getPngBase64String');
17
base64String.innerHTML = response;
18
});
19
}
20
21
function getData() {
22
return [
23
{name: 'Seasonal activities', id: 'activities', parent: null, value: 1000},
24
{name: 'Winter', parent: 'activities', id: 'winter', value: 250},
25
{name: 'Spring', parent: 'activities', id: 'spring', value: 250},
26
{name: 'Summer', parent: 'activities', id: 'summer', value: 250},
27
{name: 'Autumn', parent: 'activities', id: 'autumn', value: 250},
28
{name: 'Running', parent: 'winter', id: 'run', value: 43},
29
{name: 'Snowboarding', parent: 'winter', id: 'snowboard', value: 50},
30
{name: 'Nordic Skiing', parent: 'winter', id: 'nordic', value: 50},
31
{name: 'Working Out', parent: 'winter', id: 'workout', value: 30},
32
{name: 'Ice Skating', parent: 'winter', id: 'iceskate', value: 40},
33
{name: 'Kitesurfing', parent: 'winter', id: 'kitesurf', value: 37},
34
{name: 'Riding', parent: 'spring', id: 'ride', value: 100},
35
{name: 'Crossfit', parent: 'spring', id: 'crossfit', value: 30},
36
{name: 'Hiking', parent: 'spring', id: 'hike', value: 30},
37
{name: 'Yoga', parent: 'spring', id: 'yoga', value: 40},
38
{name: 'Running', parent: 'spring', id: 'run', value: 50},
39
{name: 'Riding', parent: 'summer', id: 'ride', value: 150},
40
{name: 'Windsurfing', parent: 'summer', id: 'windsurf', value: 20},
41
{name: 'Swimming', parent: 'summer', id: 'swim', value: 30},
42
{name: 'Roller Skiing', parent: 'summer', id: 'roller', value: 10},
43
{name: 'Rowing', parent: 'summer', id: 'rowing', value: 40},
44
{name: 'Riding', parent: 'autumn', id: 'ride', value: 90},
45
{name: 'Hiking', parent: 'autumn', id: 'windsurf', value: 20},
46
{name: 'Swimming', parent: 'autumn', id: 'swim', value: 10},
47
{name: 'Nordic Skiing', parent: 'autumn', id: 'nordic', value: 40},
48
{name: 'Climbing', parent: 'autumn', id: 'climbing', value: 40}
49
];
50
}