Available in the Full Version

Doughnut Chart - Labels and Tooltips

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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/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>