Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div id="container"></div>CSScopy
8
1
html,2
body,3
#container {4
width: 100%;5
height: 100%;6
margin: 0;7
padding: 0;8
}JavaScriptcopy
x
1
anychart.onDocumentReady(function () {2
var data = [{ "points": [47.51623,14.550072, 37.09024,-95.71289], "total": 38, "from": "United States of America", "to": "Austria", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}3
,{ "points": [38.963745,35.24332, 37.09024,-95.71289], "total": 65, "from": "United States of America", "to": "Türkiye", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}4
,{ "points": [35.907757,127.76692, 37.09024,-95.71289], "total": 19, "from": "United States of America", "to": "South Korea", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}5
,{ "points": [35.86166,104.1954, 37.09024,-95.71289], "total": 33, "from": "United States of America", "to": "China", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}6
,{ "points": [60.472023,8.468946, 37.09024,-95.71289], "total": 2, "from": "United States of America", "to": "Norway", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}7
,{ "points": [40.46367,-3.74922, 37.09024,-95.71289], "total": 38, "from": "United States of America", "to": "Spain", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}8
,{ "points": [36.204823,138.25293, 37.09024,-95.71289], "total": 9, "from": "United States of America", "to": "Japan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}9
,{ "points": [55.37805,-3.435973, 37.09024,-95.71289], "total": 95, "from": "United States of America", "to": "United Kingdom", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}10
,{ "points": [14.058324,108.2772, 37.09024,-95.71289], "total": 3, "from": "United States of America", "to": "Vietnam", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}11
,{ "points": [1.352083,103.81984, 37.09024,-95.71289], "total": 29, "from": "United States of America", "to": "Singapore", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}12
,{ "points": [51.16569,10.451526, 37.09024,-95.71289], "total": 68, "from": "United States of America", "to": "Germany", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}13
,{ "points": [61.52401,105.318756, 37.09024,-95.71289], "total": 16, "from": "United States of America", "to": "Russia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}14
,{ "points": [22.396427,114.1095, 37.09024,-95.71289], "total": 23, "from": "United States of America", "to": "Hong Kong", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}15
,{ "points": [26.820553,30.802498, 37.09024,-95.71289], "total": 28, "from": "United States of America", "to": "Egypt", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}16
,{ "points": [41.87194,12.56738, 37.09024,-95.71289], "total": 20, "from": "United States of America", "to": "Italy", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}17
,{ "points": [50.503887,4.469936, 37.09024,-95.71289], "total": 38, "from": "United States of America", "to": "Belgium", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}18
,{ "points": [26.3351,17.22833, 37.09024,-95.71289], "total": 16, "from": "United States of America", "to": "Libya", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}19
,{ "points": [42.315407,43.35689, 37.09024,-95.71289], "total": 9, "from": "United States of America", "to": "Georgia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}20
,{ "points": [46.818188,8.227512, 37.09024,-95.71289], "total": 35, "from": "United States of America", "to": "Switzerland", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}21
,{ "points": [15.870032,100.99254, 37.09024,-95.71289], "total": 10, "from": "United States of America", "to": "Thailand", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}22
,{ "points": [46.22764,2.213749, 37.09024,-95.71289], "total": 38, "from": "United States of America", "to": "France", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}23
,{ "points": [25.930414,50.63777, 37.09024,-95.71289], "total": 12, "from": "United States of America", "to": "Bahrain", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}24
,{ "points": [33.886917,9.537499, 37.09024,-95.71289], "total": 14, "from": "United States of America", "to": "Tunisia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}25
,{ "points": [23.424076,53.847816, 37.09024,-95.71289], "total": 12, "from": "United States of America", "to": "United Arab Emirates", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}26
,{ "points": [41.37749,64.58526, 37.09024,-95.71289], "total": 5, "from": "United States of America", "to": "Uzbekistan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}27
,{ "points": [-0.789275,113.921326, 37.09024,-95.71289], "total": 6, "from": "United States of America", "to": "Indonesia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}28
,{ "points": [33.85472,35.862286, 37.09024,-95.71289], "total": 12, "from": "United States of America", "to": "Lebanon", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}29
,{ "points": [30.585163,36.238415, 37.09024,-95.71289], "total": 10, "from": "United States of America", "to": "Jordan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}30
,{ "points": [-30.559483,22.937506, 37.09024,-95.71289], "total": 10, "from": "United States of America", "to": "South Africa", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}31
,{ "points": [48.019573,66.92368, 37.09024,-95.71289], "total": 9, "from": "United States of America", "to": "Kazakhstan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}32
,{ "points": [48.379433,31.16558, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Ukraine", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}33
,{ "points": [11.825138,42.590275, 37.09024,-95.71289], "total": 2, "from": "United States of America", "to": "Djibouti", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}34
,{ "points": [49.815273,6.129583, 37.09024,-95.71289], "total": 14, "from": "United States of America", "to": "Luxembourg", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}35
,{ "points": [20.593683,78.96288, 37.09024,-95.71289], "total": 8, "from": "United States of America", "to": "India", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}36
,{ "points": [-6.369028,34.88882, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Tanzania", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}37
,{ "points": [39.39987,-8.224454, 37.09024,-95.71289], "total": 12, "from": "United States of America", "to": "Portugal", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}38
,{ "points": [31.791702,-7.09262, 37.09024,-95.71289], "total": 9, "from": "United States of America", "to": "Morocco", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}39
,{ "points": [56.130367,-106.34677, 37.09024,-95.71289], "total": 20, "from": "United States of America", "to": "Canada", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}40
,{ "points": [35.937496,14.375416, 37.09024,-95.71289], "total": 10, "from": "United States of America", "to": "Malta", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}41
,{ "points": [23.69781,120.96052, 37.09024,-95.71289], "total": 4, "from": "United States of America", "to": "Taiwan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}42
,{ "points": [-0.023559,37.906193, 37.09024,-95.71289], "total": 4, "from": "United States of America", "to": "Kenya", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}43
,{ "points": [4.210484,101.97577, 37.09024,-95.71289], "total": 3, "from": "United States of America", "to": "Malaysia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}44
,{ "points": [21.913965,95.95622, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Myanmar", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}45
,{ "points": [25.354826,51.183884, 37.09024,-95.71289], "total": 7, "from": "United States of America", "to": "Qatar", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}46
,{ "points": [8.537981,-80.78213, 37.09024,-95.71289], "total": 5, "from": "United States of America", "to": "Panama", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}47
,{ "points": [40.143105,47.576927, 37.09024,-95.71289], "total": 4, "from": "United States of America", "to": "Azerbaijan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}48
,{ "points": [35.12641,33.42986, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Cyprus", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}49
,{ "points": [40.0691,45.03819, 37.09024,-95.71289], "total": 3, "from": "United States of America", "to": "Armenia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}50
,{ "points": [60.128162,18.643501, 37.09024,-95.71289], "total": 2, "from": "United States of America", "to": "Sweden", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}51
,{ "points": [16.002083,-24.013197, 37.09024,-95.71289], "total": 4, "from": "United States of America", "to": "Cape Verde", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}52
,{ "points": [53.41291,-8.24389, 37.09024,-95.71289], "total": 5, "from": "United States of America", "to": "Ireland", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}53
,{ "points": [56.26392,9.501785, 37.09024,-95.71289], "total": 3, "from": "United States of America", "to": "Denmark", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}54
,{ "points": [51.919437,19.145136, 37.09024,-95.71289], "total": 2, "from": "United States of America", "to": "Poland", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}55
,{ "points": [30.37532,69.345116, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Pakistan", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}56
,{ "points": [-20.348404,57.55215, 37.09024,-95.71289], "total": 4, "from": "United States of America", "to": "Mauritius", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}57
,{ "points": [28.394857,84.12401, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Nepal", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}58
,{ "points": [46.15124,14.995463, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Slovenia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}59
,{ "points": [52.132633,5.291266, 37.09024,-95.71289], "total": 2, "from": "United States of America", "to": "Netherlands", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}60
,{ "points": [23.885942,45.079163, 37.09024,-95.71289], "total": 1, "from": "United States of America", "to": "Saudi Arabia", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}61
,{ "points": [23.684994,90.35633, 37.09024,-95.71289], "total": 3, "from": "United States of America", "to": "Bangladesh", "curvature": 0.5, "label": { "position": "0%", "anchor": "bottom" }}62
]63
// create a connector map chart instance64
var map = anychart.connector();65
66
// include the world map geodata67
map.geoData('anychart.maps.world');68
69
// darken all regions70
map71
.unboundRegions()72
.enabled(true)73
.fill('#E1E1E1')74
.stroke('#D2D2D2');75
76
// set the map chart title77
map78
.title()79
.enabled(true)80
.useHtml(true)81
.padding([0, 0, 40, 0])82
.text(83
'<span style="color:#212121;">Migrations to the USA from the top 15 countries</span><br/>' +84
'<span style="font-size: 14px;">Majority of the migrants come from Mexico, Asia and South America</span>'85
);86
87
// display all labels even if there is an overlap88
map.overlapMode('allow-overlap');89
90
// a helper function to create the series91
// that will form the connector lines92
var createSeries = function (name, data, color) {93
94
// create and customize the connector series95
var connectorSeries = map96
.connector(data)97
.name(name)98
.fill(color)99
.stroke({100
color: color,101
thickness: 2102
});103
104
// change the coloring of the connector line in the hovered state105
connectorSeries106
.hovered()107
.stroke('1.5 #212121')108
.fill('#212121');109
110
// configure the arrow marker111
connectorSeries112
.markers()113
.position('100%')114
.fill(color)115
.stroke({116
color: color117
})118
.size(8);119
120
// configure the arrow marker in the hovered state121
connectorSeries122
.hovered()123
.markers()124
.position('100%')125
.size(10)126
.fill('#212121')127
.stroke('2 #455a64');128
129
// set the labels for the source countries130
connectorSeries131
.labels()132
.enabled(true)133
.format(function () {134
return this.getData('from');135
})136
.fontColor('#212121');137
138
// set the thickness of the connector line based on the series139
if (name === 'More than 50,000') {140
connectorSeries.startSize(5).endSize(2);141
} else if (name === '40,000 to 50,000') {142
connectorSeries.startSize(3.5).endSize(1.5);143
} else if (name === '20,000 to 40,000') {144
connectorSeries.startSize(3).endSize(1);145
} else if (name === '16,000 to 20,000') {146
connectorSeries.startSize(2).endSize(0.5);147
} else {148
connectorSeries.startSize(1).endSize(0);149
}150
151
// configure the settings for the legend items152
connectorSeries153
.legendItem()154
.iconType('square')155
.iconFill(color)156
.iconStroke(false);157
158
// configure the tooltip setting for the series159
connectorSeries160
.tooltip()161
.useHtml(true)162
.format(function () {163
return (164
'<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">From:<b> '165
+ this.getData('from')166
+ '</b></h4>' +167
'<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">To:<b> '168
+ this.getData('to')169
+ '</b></h4>' +170
'<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">Total Routes:<b> '171
+ this.getData('total').toLocaleString()172
+ '</b></h4>'173
);174
});175
176
};177
178
// create a dataset from the data179
var dataSet = anychart.data.set(data).mapAs();180
181
// create five series filtering the data182
// by the absolute values of the routes numbers183
createSeries(184
'Less than 10',185
dataSet.filter('total', filterFunction(0, 10)),186
'#fed693'187
);188
createSeries(189
'10 to 20',190
dataSet.filter('total', filterFunction(10, 20)),191
'#f5ad52'192
);193
createSeries(194
'20 to 40',195
dataSet.filter('total', filterFunction(20, 40)),196
'#3fb8c5'197
);198
createSeries(199
'40 to 50',200
dataSet.filter('total', filterFunction(40, 50)),201
'#1792c0'202
);203
createSeries(204
'More than 50',205
dataSet.filter('total', filterFunction(50, 1000000)),206
'#1c5eaa'207
);208
209
// set up the legend for the sample210
map211
.legend()212
.enabled(true)213
.position('bottom')214
.padding([0, 0, 20, 0])215
.fontSize(10);216
217
map218
.legend()219
.title()220
.enabled(true)221
.fontSize(13)222
.padding([0, 0, 5, 0])223
.text('Number of Routes');224
225
// set the container226
map.container('container');227
228
// draw the map229
map.draw();230
231
});232
233
// a helper function to bind the data field to the local var.234
function filterFunction(val1, val2) {235
if (val2) {236
return function (fieldVal) {237
return val1 <= fieldVal && fieldVal < val2;238
};239
}240
return function (fieldVal) {241
return val1 <= fieldVal;242
};243
}