Available in the Full Version
Doughnut Chart - Labels and Tooltips
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Departments
Budget (inner ring) and Department Size (outer ring)
| InnerExtent: | |
| Start Angle for the Budget Series | |
| Start Angle for the Department Size Series | |
| Label Position for the Budget Series: | |
| Label Position for the Department Size Series: | |
| Label Extent (Outside End) |
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Shows how labels, tooltips and other options can be configured in 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 id="budgetTooltipTemplate" type="text/x-ig-tmpl">
<div class="ui-chart-tooltip">
<div class='bold'>${item.Label}</div>
<div>Budget: <label class='bold'>$${item.Budget}K</label></div>
</div>
</script>
</head>
<body>
<style type="text/css">
.optionTdWidth {
width: 85px;
}
.options td {
padding-bottom: 7px;
}
.title {
text-align: center;
width: 100%;
font:16px Arial, Helvetica, sans-serif;
}
.subtitle {
text-align: center;
width: 100%;
margin: 10px 0 20px 0;
font:12px Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
</style>
<div class="title">Departments</div>
<div class="subtitle">Budget (inner ring) and Department Size (outer ring)</div>
<!-- Target element for the igDoughnutChart -->
<div id="chart"></div>
<br />
<table class="options" style="max-width: 550px; width: 100%;">
<tr>
<td>InnerExtent:</td>
<td class="optionTdWidth">
<div id="innerExtent" class="optionTdWidth"></div>
</td>
</tr>
<tr>
<td>Start Angle for the Budget Series
</td>
<td class="optionTdWidth">
<div id="angleBudget" class="optionTdWidth"></div>
</td>
</tr>
<tr>
<td>Start Angle for the Department Size Series
</td>
<td class="optionTdWidth">
<div id="angleDepartmentSize" class="optionTdWidth"></div>
</td>
</tr>
<tr>
<td>Label Position for the Budget Series:</td>
<td class="optionTdWidth">
<select id="labelPosition" class="optionTdWidth">
<option value="center" selected="selected">Center</option>
<option value="insideEnd">Inside End</option>
<option value="bestFit">Best Fit</option>
</select>
</td>
</tr>
<tr>
<td>Label Position for the Department Size Series:</td>
<td class="optionTdWidth">
<select id="labelPosition2" class="optionTdWidth">
<option value="center">Center</option>
<option value="insideEnd">Inside End</option>
<option value="outsideEnd" selected="selected">Outside End</option>
<option value="bestFit">Best Fit</option>
</select>
</td>
</tr>
<tr>
<td>Label Extent (Outside End)</td>
<td class="optionTdWidth">
<div id="labelExtent" class="optionTdWidth"></div>
</td>
</tr>
</table>
<script>
$(function () {
var data = [
{ "DepartmentSize": 43, "Budget": 60, "Label": "Administration" },
{ "DepartmentSize": 29, "Budget": 40, "Label": "Sales" },
{ "DepartmentSize": 50, "Budget": 60, "Label": "IT" },
{ "DepartmentSize": 22, "Budget": 40, "Label": "Marketing" },
{ "DepartmentSize": 13, "Budget": 60, "Label": "Development" },
{ "DepartmentSize": 34, "Budget": 20, "Label": "Support" }];
$("#chart").igDoughnutChart({
width: "100%",
height: "550px",
innerExtent: 20,
series:
[
{
name: "Budget",
labelMemberPath: "Label",
valueMemberPath: "Budget",
dataSource: data,
labelsPosition: "center",
showTooltip: true,
tooltipTemplate: "budgetTooltipTemplate"
},
{
name: "DepartmentSize",
labelMemberPath: "Label",
valueMemberPath: "DepartmentSize",
dataSource: data,
labelsPosition: "outsideEnd",
showTooltip: true,
tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.Label}</div><div>Department Size: <label class='bold'>${item.DepartmentSize}</label></div></div>"
}
]
});
$("#angleBudget").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("option", "series", [{ name: "Budget", startAngle: ui.value }]);
},
min: 0,
max: 360
});
$("#angleDepartmentSize").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", startAngle: ui.value });
},
min: 0,
max: 360
});
$("#innerExtent").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("option", "innerExtent", ui.value);
},
min: 0,
max: 80,
value: 20
});
$("#labelExtent").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", labelExtent: ui.value });
},
min: 0,
max: 50,
value: 10
});
$("#explodedRadius").slider({
slide: function (event, ui) {
$("#chart").igPieChart("option", "explodedRadius", ui.value / 100);
},
min: 0,
max: 100,
value: 20
});
$("#labelPosition").change(function (e) {
var labelPosition = $(this).val();
$("#chart").igDoughnutChart("updateSeries", { name: "Budget", labelsPosition: labelPosition });
});
$("#labelPosition2").change(function (e) {
var labelPosition = $(this).val();
$("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", labelsPosition: labelPosition });
$("#labelExtent").slider("option", "disabled", labelPosition != "outsideEnd");
});
});
</script>
</body>
</html>