Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<button onclick="label();">Apply changes (add labels)</button>2
<button onclick="autoRedraw();">Draw changes on the chart</button>3
<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
var chart;2
anychart.onDocumentReady(function () {3
var data = getData();4
5
chart = anychart.treeMap(data);6
chart.title('Disable redrawing of the chart after the changes. \n Use the buttons to apply the changes and draw them');7
chart.margin().left('15%');8
chart.container('container');9
chart.draw();10
11
// Disable chart redrawing.12
chart.autoRedraw(false);13
});14
15
function autoRedraw() {16
17
// Enable chart redrawing.18
chart.autoRedraw(true);19
}20
21
var counter = 0;22
23
function label() {24
chart.label(counter++, {enabled: true, offsetY: 10 * counter++, fontWeight: 600, fontColor: 'rgba(' + Math.floor(Math.random() * 130).toString(10) + ','25
+ Math.floor(Math.random() * 140).toString(10) + ','26
+ Math.floor(Math.random() * 150).toString(10) + ')'});27
}28
29
function getData() {30
return [31
{32
name: 'Eurasia',33
children: [34
{35
name: 'Asia', children: [36
{37
name: 'Eastern Asia', children: [38
{name: 'Mongolia', value: 1564116, capital: 'Ulan-Bator'},39
{name: 'China', value: 1564116, capital: 'Beijing'},40
{name: 'Southern Korea', value: 1564116, capital: 'Seoul'},41
{name: 'Northern Korea', value: 120540, capital: 'Pyongyang'},42
{name: 'Japan', value: 1564116, capital: 'Tokio'}43
]44
}45
]46
},47
{48
name: 'Europe', children: [49
{50
name: 'Northern Europe', children: [51
{name: 'Finland', value: 338424, capital: 'Helsinki'},52
{name: 'Great Britain', value: 209331, capital: 'London'},53
{name: 'Ireland', value: 84421, capital: 'Dublin'},54
{name: 'Scandinavia', value: 928057}55
]56
}57
]58
}59
]60
}61
];62
}