ui.igDoughnutChart

ui.igDoughnutChart_image

The igDoughnutChart displays data similar to a pie chart and can display multiple sets of data around a common center. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above. The following code snippet demonstrates how to initialize the igDoughnutChart control.

Code Sample

<!DOCTYPE html>
<html>
<head>
    <title></title>
 
    <!-- Ignite UI Required Combined CSS Files -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="css/structure/infragistics.css" rel="stylesheet" />
 
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
 
    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="js/infragistics.core.js"></script>
    <script src="js/infragistics.dv.js"></script>
 
</head>
<body>
 
    <div id="chart"></div>
 
    <script>
        $(function () {
 
            var data = [
                { "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
                { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
                { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
                { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
            ];
 
            $("#chart").igDoughnutChart({
                width: "500px",
                height: "500px",
                series:
                    [{
                            name: "Pop1990",
                            labelMemberPath: "CountryName",
                            valueMemberPath: "Pop1990",
                            dataSource: data
                    }]
            });
 
        });
    </script>
 
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery.js
jquery-ui.js
infragistics.util.js
infragistics.datasource.js
infragistics.templating.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_core.js
infragistics.dv_geometry.js
infragistics.dv_jquerydom.js
infragistics.datachart_core.js
infragistics.dvcommonwidget.js
infragistics.piechart.js
infragistics.doughnutchart.js
infragistics.ui.widget.js
infragistics.ui.basechart.js
infragistics.ui.doughnutchart.js

Inherits

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.