Available in the Full Version
Doughnut Chart - Other Category
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Top Soccer Scorers
Season 2012 / 2013
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample shows how to configure the "others" category of a doughnut chart.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
<script src="/data-files/footballers.js"></script>
</head>
<body>
<div style="text-align: center; width: 100%; font:16px Arial, Helvetica, sans-serif;">Top Soccer Scorers</div>
<div style="margin: 10px 0; text-align: center; width: 100%; font:12px Arial, Helvetica, sans-serif;">Season 2012 / 2013</div>
<!-- Target element for the igDoughnutChart -->
<div id="chart"></div>
<script>
$(function () {
$("#chart").igDoughnutChart({
width: "100%",
height: "550px",
series:
[
{
name: "Pop2025",
labelMemberPath: "name",
valueMemberPath: "goals",
dataSource: dataSource.sort(function (a, b) { return a.goals - b.goals; }),
othersCategoryType: "number",
othersCategoryThreshold: 15,
labelsPosition: "bestFit",
othersCategoryText: "Players with less than 15 goals",
formatLabel: function (context) {
if (context.isOthersSlice)
return "Players with less than 15 goals";
return context.item.name + " (" + context.item.goals + ")";
}
}
]
});
});
</script>
</body>
</html>
var dataSource = [
{
name: "Messi",
team: "Barcelona",
age: 26,
number: 10,
position: "FW",
goals: 60,
assists: 16,
yellow: 2,
red: 0,
salary: 26.5
},
{
name: "C. Ronaldo",
team: "Real Madrid",
age: 28,
number: 7,
position: "LW",
goals: 55,
assists: 12,
yellow: 13,
red: 1,
salary: 25
},
{
name: "Villa",
team: "Atletico Madrid",
age: 26,
number: 7,
position: "FW",
goals: 16,
assists: 5,
yellow: 1,
red: 0,
salary: 12
},
{
name: "Benzema",
team: "Real Madrid",
age: 25,
number: 9,
position: "CF",
goals: 33,
assists: 19,
yellow: 0,
red: 0,
salary: 10
},
{
name: "Fabregas",
team: "Barcelona",
age: 26,
number: 10,
position: "FW",
goals: 43,
assists: 16,
yellow: 2,
red: 0,
salary: 14
},
{
name: "Di Maria",
team: "Real Madrid",
age: 28,
number: 22,
position: "RW",
goals: 9,
assists: 13,
yellow: 5,
red: 2,
salary: 8
},
{
name: "Xavi",
team: "Barcelona",
age: 26,
number: 7,
position: "CM",
goals: 16,
assists: 5,
yellow: 1,
red: 0,
salary: 14
},
{
name: "Ozil",
team: "Real Madrid",
age: 25,
number: 9,
position: "AM",
goals: 33,
assists: 19,
yellow: 0,
red: 0,
salary: 10
},
{
name: "Iniesta",
team: "Barcelona",
age: 26,
number: 8,
position: "CM",
goals: 6,
assists: 20,
yellow: 4,
red: 0,
salary: 12.5
},
{
name: "Ramos",
team: "Real Madrid",
age: 27,
number: 4,
position: "CB",
goals: 5,
assists: 1,
yellow: 14,
red: 2,
salary: 9
},
{
name: "Neymar",
team: "Barcelona",
age: 21,
number: 11,
position: "FW",
goals: 43,
assists: 15,
yellow: 3,
red: 1,
salary: 20
},
{
name: "Isco",
team: "Real Madrid",
age: 21,
number: 23,
position: "AM",
goals: 13,
assists: 12,
yellow: 4,
red: 0,
salary: 19
},
{
name: "Pedro",
team: "Barcelona",
age: 26,
number: 7,
position: "FW",
goals: 10,
assists: 7,
yellow: 6,
red: 0,
salary: 13
},
{
name: "Iker",
team: "Real Madrid",
age: 32,
number: 1,
position: "GK",
goals: 0,
assists: 0,
yellow: 1,
red: 0,
salary: 16
},
{
name: "Valdes",
team: "Barcelona",
age: 31,
number: 1,
position: "GK",
goals: 0,
assists: 0,
yellow: 12,
red: 1,
salary: 14
},
{
name: "Higuain",
team: "Napoli",
age: 25,
number: 9,
position: "FW",
goals: 9,
assists: 13,
yellow: 5,
red: 1,
salary: 8
},
{
name: "Puyol",
team: "Barcelona",
age: 35,
number: 4,
position: "CB",
goals: 2,
assists: 0,
yellow: 5,
red: 0,
salary: 18
},
{
name: "Kaka",
team: "Real Madrid",
age: 31,
number: 8,
position: "AM",
goals: 5,
assists: 5,
yellow: 1,
red: 2,
salary: 15
},
{
name: "Sergio",
team: "Barcelona",
age: 25,
number: 16,
position: "CM",
goals: 1,
assists: 2,
yellow: 11,
red: 1,
salary: 13.5
},
{
name: "Alonso",
team: "Real Madrid",
age: 31,
number: 14,
position: "CM",
goals: 8,
assists: 0,
yellow: 18,
red: 0,
salary: 14
},
{
name: "Courtois",
team: "Atletico Madrid",
age: 20,
number: 14,
position: "GK",
goals: 0,
assists: 0,
yellow: 0,
red: 0,
salary: 7
},
{
name: "Koke",
team: "Atletico Madrid",
age: 21,
number: 6,
position: "MF",
goals: 3,
assists: 0,
yellow: 0,
red: 0,
salary: 9
},
{
name: "Falcao",
team: "Monaco",
age: 29,
number: 9,
position: "FW",
goals: 21,
assists: 5,
yellow: 3,
red: 0,
salary: 24
},
{
name: "Neuer",
team: "Bayern Munich",
age: 27,
number: 1,
position: "GK",
goals: 0,
assists: 0,
yellow: 2,
red: 0,
salary: 12
},
{
name: "Ribery",
team: "Bayern Munich",
age: 30,
number: 7,
position: "LW",
goals: 11,
assists: 23,
yellow: 4,
red: 1,
salary: 16
},
{
name: "Schweinsteiger",
team: "Bayern Munich",
age: 29,
number: 31,
position: "CM",
goals: 9,
assists: 15,
yellow: 10,
red: 0,
salary: 17
},
{
name: "Lewandowski",
team: "Borussia Dortmund",
age: 24,
number: 9,
position: "CF",
goals: 36,
assists: 9,
yellow: 5,
red: 0,
salary: 12
},
{
name: "Reus",
team: "Borussia Dortmund",
age: 24,
number: 11,
position: "FW",
goals: 19,
assists: 11,
yellow: 1,
red: 0,
salary: 8
},
{
name: "Gotze",
team: "Bayern Munich",
age: 24,
number: 11,
position: "FW",
goals: 16,
assists: 16,
yellow: 3,
red: 0,
salary: 15
},
{
name: "Balotelli",
team: "Milan",
age: 23,
number: 45,
position: "FW",
goals: 15,
assists: 5,
yellow: 3,
red: 0,
salary: 12
},
{
name: "Buffon",
team: "Juventus",
age: 23,
number: 1,
position: "GK",
goals: 0,
assists: 0,
yellow: 0,
red: 0,
salary: 12
},
{
name: "Pirlo",
team: "Juventus",
age: 34,
number: 21,
position: "MF",
goals: 8,
assists: 18,
yellow: 7,
red: 0,
salary: 11
},
{
name: "Torres",
team: "Chelsea",
age: 29,
number: 9,
position: "FW",
goals: 22,
assists: 8,
yellow: 0,
red: 0,
salary: 12
},
{
name: "Mata",
team: "Chelsea",
age: 25,
number: 10,
position: "MF",
goals: 20,
assists: 18,
yellow: 4,
red: 0,
salary: 15
},
{
name: "Lampard",
team: "Chelsea",
age: 34,
number: 8,
position: "MF",
goals: 17,
assists: 10,
yellow: 4,
red: 0,
salary: 17
},
{
name: "Hazard",
team: "Chelsea",
age: 22,
number: 17,
position: "MF",
goals: 13,
assists: 18,
yellow: 1,
red: 1,
salary: 14
},
{
name: "Oscar",
team: "Chelsea",
age: 21,
number: 11,
position: "MF",
goals: 12,
assists: 6,
yellow: 6,
red: 0,
salary: 10
},
{
name: "Ramires",
team: "Chelsea",
age: 26,
number: 7,
position: "MF",
goals: 9,
assists: 18,
yellow: 7,
red: 0,
salary: 11
},
{
name: "Luiz",
team: "Chelsea",
age: 26,
number: 4,
position: "CB",
goals: 7,
assists: 1,
yellow: 16,
red: 0,
salary: 12
},
{
name: "Silva",
team: "PSG",
age: 28,
number: 2,
position: "DF",
goals: 1,
assists: 1,
yellow: 10,
red: 1,
salary: 14
},
{
name: "Berbatov",
team: "Fulham",
age: 32,
number: 9,
position: "FW",
goals: 15,
assists: 7,
yellow: 4,
red: 0,
salary: 12
}
]