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
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
// Defines settings for maps regions (regions bounds are not relevant for this data, so let's make it less contrast)3
var customTheme = {4
"map": {5
'unboundRegions': {'enabled': true, 'fill': '#E1E1E1', 'stroke': '#D2D2D2'}6
}7
};8
anychart.theme(customTheme);9
10
// Creates map chart11
var map = anychart.connector();12
13
// Sets settings for map chart14
map.padding([10, 10, 10, 10]);15
map.geoData(anychart.maps.world);16
map.interactivity().selectionMode("none");17
18
19
// Helper function to create several series20
var createSeries = function (name, data, color) {21
//Creates connector series for destinations and customizes them22
var connectorSeries = map.connector(data)23
.name(name)24
.fill(color)25
.stroke('1.5 ' + color)26
.curvature(0)27
.markers({position: '100%', size: 20, fill: color, stroke: '2 #E1E1E1'});28
connectorSeries.hovered()29
.stroke('1.5 #212121')30
.fill('#212121')31
.markers({position: '100%', size: 20, fill: '#212121', stroke: '2 #E1E1E1'});32
33
if (name == 'More then 10%') connectorSeries.startSize(7).endSize(2);34
else if (name == '5 - 10%') connectorSeries.startSize(5).endSize(1.5);35
else if (name == '3 - 5%') connectorSeries.startSize(3).endSize(1);36
else connectorSeries.startSize(0).endSize(0);37
38
//Sets settings for labels for the destination series39
connectorSeries.labels()40
.enabled(true)41
.offsetY(0)42
.offsetX(0)43
.fontSize(10)44
.position('100%')45
.format(function () {46
return this.getData('to')47
});48
connectorSeries.hovered().labels().enabled(true).fontColor('#212121');49
50
//Sets settings for legend items51
connectorSeries.legendItem({iconType: "square", iconFill: color, iconStroke: null});52
53
//Sets tooltip setting for the destination series54
connectorSeries.tooltip({padding: [8, 13, 10, 13]});55
connectorSeries.tooltip().titleFormat(function () {56
return this.getData('to')57
});58
connectorSeries.tooltip().useHtml(true).fontSize(13).format(function () {59
return '<span style="font-size: 12px; color: #cbcbcb">Total:</span> $' + this.getData('total') + ' billion <br/>' +60
'<span style="font-size: 12px; color: #cbcbcb">Overall Exports Percent:</span> ' + this.getData('percent') + '%'61
});62
};63
64
// Creates Dataset from Sample data65
var exportDataSet = anychart.data.set(exportData).mapAs();66
67
// Creates 5 series, filtering the data by the amount of Fatalities68
createSeries('Les then 0.5%', exportDataSet.filter('percent', filter_function(0, 0.5)), '#64b5f6');69
createSeries('0.5 - 1.5%', exportDataSet.filter('percent', filter_function(0.5, 1.5)), '#1976d2');70
createSeries('1.5 - 3%', exportDataSet.filter('percent', filter_function(1.5, 3)), '#1976d2');71
createSeries('3 - 5%', exportDataSet.filter('percent', filter_function(3, 5)), '#355CB1');72
createSeries('5 - 10%', exportDataSet.filter('percent', filter_function(5, 10)), '#5C3883');73
createSeries('More then 10%', exportDataSet.filter('percent', filter_function(10)), '#880e4f');74
75
// Turns on the legend for the sample76
map.legend().enabled(true).position('center-bottom').padding([20, 0, 0, 0]).fontSize(10);77
map.legend().title().enabled(true).text('Percent of Chinese Overall Exports').fontSize(13).padding([0, 0, 5, 0]);78
79
// Sets container id for the chart80
map.container('container');81
82
// Initiates chart drawing83
map.draw();84
});85
86
// Helper function to bind data field to the local var.87
function filter_function(val1, val2) {88
if (val2)89
return function (fieldVal) {90
return val1 <= fieldVal && fieldVal < val2;91
};92
else93
return function (fieldVal) {94
return val1 <= fieldVal;95
};96
}97
98
// Sets data for the destination (connector) series99
var exportData = [100
{points: [39.90487, 116.402231, 48.207834, 16.373794], total: 2.4, percent: 0.1, to: "Austria", curvature: -0.15, label: {position: '55%', anchor: 'center-bottom'}},101
{points: [39.90487, 116.402231, 59.912917, 10.75174], total: 2.7, percent: 0.1, to: "Norway", curvature: 0.75, label: {position: '55%'}},102
{points: [39.90487, 116.402231, 46.947939, 7.448878], total: 3.1, percent: 0.1, to: "Switzerland", curvature: -0.55, label: {anchor: 'right-top', position: '50%', offsetY: -5, offsetX: 0}},103
{points: [39.90487, 116.402231, 59.328568, 18.068252], total: 7.2, percent: 0.3, to: "Sweden", curvature: 0.5, label: {position: '60%'}},104
{points: [39.90487, 116.402231, 52.227476, 21.011642], total: 14.3, percent: 0.6, to: "Poland", curvature: -0.05, label: {anchor: 'left-top', offsetX: 10, offsetY: 5}},105
{points: [39.90487, 116.402231, 50.847534, 4.350937], total: 17.2, percent: 0.7, to: "Belgium", curvature: 0.45, label: {position: '50%'}},106
{points: [39.90487, 116.402231, 39.932089, 32.859522], total: 19.3, percent: 0.8, to: "Turkey", curvature: -0.15, label: {anchor: 'center-top', position: '70%', offsetY: -3}},107
{points: [39.90487, 116.402231, 24.710437, 46.675164], total: 20.6, percent: 0.9, to: "Saudi Arabia", curvature: -0.3, label: {anchor: 'left-bottom', offsetX: -5}},108
{points: [39.90487, 116.402231, 40.40615, -3.701934], total: 21.5, percent: 0.9, to: "Spain", curvature: -0.55, label: {anchor: 'right-top'}},109
{points: [39.90487, 116.402231, 41.901737, 12.49625], total: 28.8, percent: 1.2, to: "Italy", curvature: -0.45, label: {anchor: 'center-bottom', offsetY: 3, position: '75%'}},110
{points: [39.90487, 116.402231, 48.836364, 2.355807], total: 29, percent: 1.2, to: "France", curvature: -0.6, label: {anchor: 'right-top'}},111
{points: [39.90487, 116.402231, 45.411673, -75.69629], total: 30, percent: 1.3, to: "Canada", curvature: -0.51},112
{points: [39.90487, 116.402231, 19.462558, -99.136756], total: 32.3, percent: 1.4, to: "Mexico", curvature: -0.6},113
{points: [39.90487, 116.402231, 13.756717, 100.501634], total: 34.3, percent: 1.5, to: "Thailand", curvature: -0.1},114
{points: [39.90487, 116.402231, -15.80048, -47.88187], total: 34.9, percent: 1.5, to: "Brazil", curvature: -0.3},115
{points: [39.90487, 116.402231, -6.191635, 106.834857], total: 39.1, percent: 1.7, to: "Indonesia"},116
{points: [39.90487, 116.402231, -30.592659, 145.943667], total: 39.1, percent: 1.7, to: "Australia"},117
{points: [39.90487, 116.402231, 1.354784, 103.867475], total: 48.9, percent: 2.1, to: "Singapore"},118
{points: [39.90487, 116.402231, 55.747362, 37.621273], total: 53.7, percent: 2.3, to: "Russia", curvature: 0.1, label: {anchor: 'left-top', offsetX: 10}},119
{points: [39.90487, 116.402231, 28.610198, 77.207584], total: 54.2, percent: 2.3, to: "India", curvature: -0.3, label: {anchor: 'center-bottom'}},120
{points: [39.90487, 116.402231, 52.667078, -0.955920], total: 57.2, percent: 2.4, to: "United Kindom", curvature: 0.95, label: {position: '50%'}},121
{points: [39.90487, 116.402231, 52.369775, 4.89441], total: 64.9, percent: 2.8, to: "Netherlands", curvature: 0.7, label: {position: '50%'}},122
{points: [39.90487, 116.402231, 52.511693, 13.403121], total: 72.7, percent: 3.1, to: "Germany", curvature: 0.35, label: {position: '45%', anchor: 'center-top'}},123
{points: [39.90487, 116.402231, 37.548124, 126.99126], total: 100.4, percent: 4.3, to: "South Korea", label: {offsetY: 10}},124
{points: [39.90487, 116.402231, 36.653054, 137.141329], total: 149.6, percent: 6.4, to: "Japan", curvature: 0.3, label: {anchor: 'left-bottom'}},125
{points: [39.90487, 116.402231, 38.884053, -77.033513], total: 397.2, percent: 17, to: "United States", curvature: -0.5}126
127
];