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
var data = [
4
{"x": "Mandarin chinese", "value": 1090000000, category: "Sino-Tibetan"},
5
{"x": "English", "value": 983000000, category: "Indo-European"},
6
{"x": "Hindustani", "value": 544000000, category: "Indo-European"},
7
{"x": "Spanish", "value": 527000000, category: "Indo-European"},
8
{"x": "Arabic", "value": 422000000, category: "Afro-Asiatic"},
9
{"x": "Malay", "value": 281000000, category: "Austronesian"},
10
{"x": "Russian", "value": 267000000, category: "Indo-European"},
11
{"x": "Bengali", "value": 261000000, category: "Indo-European"},
12
{"x": "Portuguese", "value": 229000000, category: "Indo-European"},
13
{"x": "French", "value": 229000000, category: "Indo-European"},
14
{"x": "Hausa", "value": 150000000, category: "Afro-Asiatic"},
15
{"x": "Punjabi", "value": 148000000, category: "Indo-European"},
16
{"x": "Japanese", "value": 129000000, category: "Japonic"},
17
{"x": "German", "value": 129000000, category: "Indo-European"},
18
{"x": "Persian", "value": 121000000, category: "Indo-European"}
19
];
20
21
// create a tag cloud chart
22
var chart = anychart.tagCloud(data);
23
24
// set the chart title
25
chart.title('15 most spoken languages')
26
// set array of angles, by which words will be placed
27
chart.angles([0])
28
// enable color range
29
chart.colorRange(true);
30
// set color range length
31
chart.colorRange().length('80%');
32
33
// display chart
34
chart.container("container");
35
chart.draw();
36
});