$(function(){
$("#chart").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: 'bubble'
},
title: 'Correlation between Total Population and\n Population with Age over 60',
tooltip: {
enabled: true,
location: "edge",
customizeTooltip: function (arg) {
return {
text: arg.point.tag + '<br/>Total Population: ' + arg.argumentText + 'M<br/>Population with Age over 60: ' + arg.valueText + 'M (' + arg.size + '%)'
};
}
},
argumentAxis: {
label: {
customizeText: function () {
return this.value + 'M';
}
},
title: 'Total Population'
},
valueAxis: {
label: {
customizeText: function () {
return this.value + 'M';
}
},
title: 'Population with Age over 60'
},
legend: {
position: 'inside',
horizontalAlignment: 'left',
border: {
visible: true
}
},
palette: ["#00ced1", "#008000", "#ffd700", "#ff7f50"],
onSeriesClick: function(e) {
var series = e.target;
if (series.isVisible()) {
series.hide();
} else {
series.show();
}
},
"export": {
enabled: true
},
series: [{
name: 'Europe',
argumentField: 'total1',
valueField: 'older1',
sizeField: 'perc1',
tagField:'tag1'
}, {
name: 'Africa',
argumentField: 'total2',
valueField: 'older2',
sizeField: 'perc2',
tagField: 'tag2'
}, {
name: 'Asia',
argumentField: 'total3',
valueField: 'older3',
sizeField: 'perc3',
tagField: 'tag3'
}, {
name: 'North America',
argumentField: 'total4',
valueField: 'older4',
sizeField: 'perc4',
tagField: 'tag4'
}]
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
var dataSource = [{
total1: 9.5,
total2: 168.8,
total3: 127.2,
older1: 2.4,
older2: 8.8,
older3: 40.1,
perc1: 25.4,
perc2: 5.3,
perc3: 31.6,
tag1: 'Sweden',
tag2: 'Nigeria',
tag3: 'Japan'
}, {
total1: 82.8,
total2: 91.7,
total3: 90.8,
older1: 21.9,
older2: 4.6,
older3: 8.0,
perc1: 26.7,
perc2: 5.4,
perc3: 8.9,
tag1: 'Germany',
tag2: 'Ethiopia',
tag3: 'Viet Nam'
}, {
total1: 16.7,
total2: 80.7,
total3: 21.1,
older1: 3.8,
older2: 7.0,
older3: 2.7,
perc1: 22.8,
perc2: 8.4,
perc3: 12.9,
tag1: 'Netherlands',
tag2: 'Egypt',
tag3: 'Sri Lanka'
}, {
total1: 62.8,
total2: 52.4,
total3: 96.7,
older1: 14.4,
older2: 4.0,
older3: 5.9,
perc1: 23.0,
perc2: 7.8,
perc3: 6.1,
tag1: 'United Kingdom',
tag2: 'South Africa',
tag3: 'Philippines'
}, {
total1: 38.2,
total2: 43.2,
total3: 66.8,
older1: 7.8,
older2: 1.8,
older3: 9.6,
perc1: 20.4,
perc2: 4.3,
perc3: 13.7,
tag1: 'Poland',
tag2: 'Kenya',
tag3: 'Thailand'
}, {
total1: 45.5,
total3: 154.7,
total4: 34.8,
older1: 9.5,
older3: 10.3,
older4: 7.2,
perc1: 21.1,
perc3: 6.8,
perc4: 20.8,
tag1: 'Ukraine',
tag3: 'Bangladesh',
tag4: 'Canada'
}, {
total1: 143.2,
total4: 120.8,
older1: 26.5,
older4: 11.0,
perc1: 18.6,
perc4: 9.5,
tag1: 'Russian Federation',
tag4: 'Mexico'
}];