$(function () {
$("#pie").dxPieChart({
palette: "Vintage",
dataSource: dataSource,
commonAnnotationSettings: {
type: "image",
image: {
height: 60,
width: 90
},
color: "transparent",
border: {
color: "transparent"
},
paddingLeftRight: 0,
paddingTopBottom: 0,
tooltipTemplate: tooltipTemplate
},
annotations: getAnnotationSources(),
series: [{
argumentField: "country",
valueField: "gold",
label: {
visible: true,
position: "inside",
radialOffset: 83,
backgroundColor: "transparent",
font: {
size: 16,
weight: 600
}
}
}],
tooltip: {
paddingLeftRight: 12,
paddingTopBottom: 10,
},
legend: {
visible: false
},
title: "Ice Hockey World Championship Gold Medal Winners"
});
function getAnnotationSources() {
annotations.forEach(function(a, index, array) {
array[index].image = "../../../../images/flags/3x2/" + a.argument.replace(/\s/, "") + ".svg";
array[index].data = $.extend({}, dataSource.filter(function(d) { return d.country === a.argument; })[0]);
if(a.location === "edge") {
array[index] = $.extend({}, a, edgeAnnotationSettings)
}
});
return annotations;
}
function tooltipTemplate(annotation, container) {
var data = annotation.data;
var contentItems = ["<div class='medal-tooltip'>",
"<div class='country-name'></div>",
"<div class='gold'><span class='caption'>Gold</span>: </div>",
"<div class='silver'><span class='caption'>Silver</span>: </div>",
"<div class='bronze'><span class='caption'>Bronze</span>: </div>",
"</div>"];
var content = $(contentItems.join(""));
content.find(".country-name").text(data.country);
if(data.oldCountryName) {
content.find(".country-name").append("<br/>").append(document.createTextNode(data.oldCountryName));
}
content.find(".gold").append(document.createTextNode(data.gold));
content.find(".silver").append(document.createTextNode(data.silver));
content.find(".bronze").append(document.createTextNode(data.bronze));
content.appendTo(container);
}
});
<!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.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.6/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="pie"></div>
</div>
</body>
</html>
#pie {
height: 440px;
}
.medal-tooltip {
font-size: 12px;
}
.medal-tooltip .country-name {
font-size: 14px;
font-weight: 700;
margin: 5px 0px 10px 0px;
}
.medal-tooltip .caption {
font-weight: 600;
}
var annotations = [{
argument: "Russia",
offsetX: 15,
offsetY: 5
}, {
argument: "Canada",
offsetY: 10
}, {
argument: "Czech Republic",
offsetX: -5,
offsetY: -35
}, {
argument: "Sweden",
offsetX: 20,
offsetY: -25
}, {
argument: "Finland",
location: "edge",
offsetX: 45,
offsetY: -85,
}, {
argument: "United States",
location: "edge",
offsetX: 85,
offsetY: -45,
}, {
argument: "Great Britain",
location: "edge",
offsetX: 81,
offsetY: 15
}, {
argument: "Slovakia",
location: "edge",
offsetX: 45,
offsetY: 80
}];
var edgeAnnotationSettings = {
color: "#aaaaaa",
border: {
color: "#aaaaaa"
},
shadow: {
opacity: 0.3,
}
};
var dataSource = [{
country: "Russia",
oldCountryName: "Soviet Union",
gold: 27,
silver: 10,
bronze: 10
}, {
country: "Canada",
gold: 26,
silver: 15,
bronze: 9
}, {
country: "Czech Republic",
oldCountryName: 'Czechoslovakia',
gold: 12,
silver: 13,
bronze: 21
}, {
country: "Sweden",
gold: 11,
silver: 19,
bronze: 17
}, {
country: "Finland",
gold: 3,
silver: 8,
bronze: 3
}, {
country: "United States",
gold: 2,
silver: 9,
bronze: 8
}, {
country: "Great Britain",
gold: 1,
silver: 2,
bronze: 2
}, {
country: "Slovakia",
gold: 1,
silver: 2,
bronze: 1
}];