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.datachart_core.js
infragistics.dvcommonwidget.js
infragistics.piechart.js
infragistics.doughnutchart.js
infragistics.ui.basechart.js
infragistics.ui.doughnutchart.js

Inherits

  • allowSliceExplosion

    Type:
    bool
    Default:
    true

    Gets or sets whether the slices can be exploded.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
                allowSliceExplosion : true
            });
            
            // Get
            var allowSliceExplosion = $("#chart").igDoughnutChart("option", "allowSliceExplosion");
            
            // Set
            $("#chart").igDoughnutChart("option", "allowSliceExplosion", true);
          
  • allowSliceSelection

    Type:
    bool
    Default:
    true

    Gets or sets whether the slices can be selected.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
                allowSliceSelection : true
            });
            
            // Get
            var allowSliceSelection = $("#chart").igDoughnutChart("option", "allowSliceSelection");
            
            // Set
            $("#chart").igDoughnutChart("option", "allowSliceSelection", true);
          
  • dataSource
    Inherited

    Type:
    object
    Default:
    null

    Gets sets a valid data source.
    That can be instance of array or primitives, array of objects, instance of $.ig.DataSource, or any other data accepted by $.ig.DataSource.
    Note: if it is set to string and "dataSourceType" option is not set, then $.ig.JSONPDataSource is used.

    Code Sample

     
    // Data
    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 }];
    
    // Initialize
    $("#chart").igDoughnutChart({
    	dataSource: data
    });
    
    // Get
    var dataSource = $(".selector").igDoughnutChart("option", "dataSource");
    
    // Set
    $(".selector").igDoughnutChart("option", "dataSource", data);
    
  • dataSourceType
    Inherited

    Type:
    string
    Default:
    null

    Gets sets data source type (such as "json", "xml", etc). Please refer to the documentation of $.ig.DataSource and its type property.

    Code Sample

     
    //Initialize
    $(".selector").igDoughnutChart({
        dataSourceType: "json"
    });
      
    //Get
    var type= $(".selector").igDoughnutChart("option", "dataSourceType");
     
    //Set
    $(".selector").igDoughnutChart("option", "dataSourceType", "http://myhost/data");
    
  • dataSourceUrl
    Inherited

    Type:
    string
    Default:
    null

    Gets sets url which is used for sending JSON on request for remote data.

    Code Sample

     
    //Initialize
    $(".selector").igDoughnutChart({
        dataSourceUrl : "http://myhost/data"
    });
      
    //Get
    var url = $(".selector").igDoughnutChart("option", "dataSourceUrl");
     
    //Set
    $(".selector").igDoughnutChart("option", "dataSourceUrl", "http://myhost/data");
    
  • height

    Type:
    enumeration
    Default:
    null

    The height of the chart. It can be set as a number in pixels, string (px) or percentage (%).

    Members

      • string
      • The widget height can be set in pixels (px) and percentage (%).
      • number
      • The widget height can be set as a number.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
                height : "400px"
            });
            
            // Get
            var height = $("#chart").igDoughnutChart("option", "height");
            
            // Set
            $("#chart").igDoughnutChart("option", "height", "400px");
            
  • innerExtent

    Type:
    number
    Default:
    40

    Gets or sets the inner extent of the doughnut chart. It is percent from the outer ring's radius.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
                innerExtent : 10
            });
            
            // Get
            var innerExtent = $("#chart").igDoughnutChart("option", "innerExtent");
            
            // Set
            $("#chart").igDoughnutChart("option", "innerExtent", 10);
          
  • isSurfaceInteractionDisabled

    Type:
    object
    Default:
    false

    Gets or sets whether all surface interactions with the plot area should be disabled.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
                isSurfaceInteractionDisabled : true
            });
            
            // Get
            var isSurfaceInteractionDisabled = $("#chart").igDoughnutChart("option", "isSurfaceInteractionDisabled");
            
            // Set
            $("#chart").igDoughnutChart("option", "isSurfaceInteractionDisabled", true);
          
  • maxRecCount
    Inherited

    Type:
    number
    Default:
    0

    Gets sets maximum number of displayed records in chart.

    Code Sample

     
    $(".selector").igDoughnutChart({
        maxRecCount : 100
    });
      
    //Get
    var count = $(".selector").igDoughnutChart("option", "maxRecCount");
      
    //Set
    $(".selector").igDoughnutChart("option", "maxRecCount", 100);
    
  • responseDataKey
    Inherited

    Type:
    string
    Default:
    null

    See $.ig.DataSource. This is basically the property in the responses where data records are held, if the response is wrapped.

    Code Sample

     
    //Initialize
    $(".selector").igDoughnutChart({
        responseDataKey : "d.results"
    });
      
    //Get
    var key = $(".selector").igDoughnutChart("option", "responseDataKey");
      
    //Set
    $(".selector").igDoughnutChart("option", "responseDataKey", "d.results");
    
  • responseTotalRecCountKey
    Inherited

    Type:
    string
    Default:
    null

    See $.ig.DataSource. property in the response specifying the total number of records on the server.

    Code Sample

     
    $(".selector").igDoughnutChart({
        responseTotalRecCountKey : "total"
    });
      
    //Get
    var key = $(".selector").igDoughnutChart("option", "responseTotalRecCountKey");
      
    //Set
    $(".selector").igDoughnutChart("option", "responseTotalRecCountKey", "total");
    
  • selectedStyle

    Type:
    object
    Default:
    null

    Gets or sets the style used when a slice is selected.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
                selectedStyle : { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 }
            });
            
            // Get
            var selectedStyle = $("#chart").igDoughnutChart("option", "selectedStyle");
            
            // Set
            $("#chart").igDoughnutChart("option", "selectedStyle", { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 });
          
  • series

    Type:
    array
    Default:
    []
    Elements Type:
    object

    An array of series objects.

    Code Sample

     
            // Initialize
            $("#chart").igDoughnutChart({
               series: 
                  [{
                      name: "Pop1990",
                      labelMemberPath: "CountryName",
                      valueMemberPath: "Pop1990",
                      dataSource: data
                  }]
            });
            
            // Get (Only returns the value last set to the option, the actual series that are displayed may differ.)
            var series = $("#chart").igDoughnutChart("option", "series");
            
            // Update the series with the specified name
            $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", brushes: ["red"] }]);
          
    • brushes

      Type:
      object
      Default:
      null

      Gets or sets the palette of brushes to use for coloring the slices.
      The value provided should be an array of css color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        brushes: ["red", "yellow", "blue"],
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].brushes;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", brushes: ["red", "yellow", "blue"] }]);
            
    • formatLabel

      Type:
      object
      Default:
      null

      Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        formatLabel: function(context){
                          // context.isOthersSlice; returns true if this is the "others" slice
                          // context.item; returns the datasource item for the current slice
                          // context.itemLabel; returns the label that will be used
                          // context.percentValue; returns the percent value for the current slice
                          
                          // In order to change the label you need to return the desired string e.g.:
                          return Math.round(context.percentValue * 10) / 10;
                        },
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].formatLabel;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", formatLabel: function(context) {return context.itemLabel.toLowerCase(); } }]);
                
    • formatLegendLabel

      Type:
      object
      Default:
      null

      Sets or gets a function which takes an object that produces a formatted label for displaying in the chart's legend.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        formatLegendLabel: function(context){
                          // context.isOthersSlice; returns true if this is the "others" slice
                          // context.item; returns the datasource item for the current slice
                          // context.itemLabel; returns the label that will be used
                          // context.percentValue; returns the percent value for the current slice
                          
                          // In order to change the label you need to return the desired string e.g.:
                          return Math.round(context.percentValue * 10) / 10;
                        },
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].formatLegendLabel;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", formatLegendLabel: function(context) {return context.itemLabel.toLowerCase(); } }]);
                
    • isSurfaceInteractionDisabled

      Type:
      object
      Default:
      null

      Gets or sets whether all surface interactions with the plot area should be disabled.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        isSurfaceInteractionDisabled: true,
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].isSurfaceInteractionDisabled;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", isSurfaceInteractionDisabled: true }]);
                
    • itemsSource

      Type:
      object
      Default:
      null

      Gets or sets the data source for the chart.

      Code Sample

       
      // Data
      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 }];
      
      // Initialize
      $("#chart").igDoughnutChart({
      	series: [{
      		itemsSource: data,
      		name: "Pop1990",
      		labelMemberPath: "CountryName",
      		valueMemberPath: "Pop1990"
      	}]
      });
              
      // Get
      var series = $("#chart").igDoughnutChart("option", "series");
      series[0].itemsSource;
              
      // Set
      $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", itemsSource: data }]);
                
    • labelExtent

      Type:
      number
      Default:
      10

      Gets or sets the pixel amount by which the labels are offset from the edge of the slices.

      Code Sample

       
              // labelsPosition has to be set to "outsideEnd" in order for the labelExtent to apply
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        labelExtent: 50,
                        labelsPosition: "outsideEnd",
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].labelExtent;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", labelExtent: 50 }]);
                
    • labelMemberPath

      Type:
      string
      Default:
      null

      Gets or sets the property name that contains the labels.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].labelMemberPath;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", labelMemberPath: "Pop1990" }]);
                
    • labelsPosition

      Type:
      enumeration
      Default:
      center

      Gets or sets the position of chart labels.

      Members

      • none
      • Type:string
      • .
      • center
      • Type:string
      • .
      • insideEnd
      • Type:string
      • .
      • outsideEnd
      • Type:string
      • .
      • bestFit
      • Type:string

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        labelsPosition: "outsideEnd",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].labelsPosition;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", labelsPosition: "outsideEnd" }]);
                
    • leaderLineMargin

      Type:
      number
      Default:
      6

      Gets or sets the margin between a label and its leader line. The default is 6 pixels.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        leaderLineMargin: 0,
                        labelsPosition: "outsideEnd",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].leaderLineMargin;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineMargin: 0 }]);
                
    • leaderLineStyle

      Type:
      object
      Default:
      null

      Gets or sets the style for the leader lines.

      Code Sample

       
      var style = {
      	stroke: "red",
      	strokeThickness: 3,
      	opacity: 0.5
      };
      
      // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        leaderLineStyle: style,
                        labelsPosition: "outsideEnd",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].leaderLineStyle;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineStyle: style }]);
       
    • leaderLineType

      Type:
      enumeration
      Default:
      straight

      Gets or sets what type of leader lines will be used for the outside end labels.

      Members

      • straight
      • Type:string
      • .
      • arc
      • Type:string
      • .
      • spline
      • Type:string

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        leaderLineType: "spline",
                        labelsPosition: "outsideEnd",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].leaderLineType;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineType: "spline" }]);
                
    • leaderLineVisibility

      Type:
      enumeration
      Default:
      visible

      Gets or sets whether the leader lines are visible.

      Members

      • visible
      • Type:string
      • .
      • collapsed
      • Type:string

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        leaderLineVisibility: "collapsed",
                        labelsPosition: "outsideEnd",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].leaderLineVisibility;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineVisibility: "collapsed" }]);
                
    • legend

      Type:
      object
      Default:
      null

      Gets or sets the legend used for the current chart.

      Code Sample

       
              // You need to supply a dom element to use for the legend (preferably a div element)
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        legend: $("selectorForLegendElement"),
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].legend;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", legend: $("selectorForLegendElement") }]);
                
    • legendLabelMemberPath

      Type:
      string
      Default:
      null

      Gets or sets the property name that contains the legend labels.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        legendLabelMemberPath: "Label",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].legendLabelMemberPath;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", legendLabelMemberPath: "Label" }]);
                
    • othersCategoryText

      Type:
      string
      Default:
      "Others"

      Gets or sets the label of the Others slice.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series:
                    [{
                        othersCategoryText: "Others Label",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].othersCategoryText;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", othersCategoryText: "Others Label" }]);
                
    • othersCategoryThreshold

      Type:
      number
      Default:
      3

      Gets or sets the threshold value that determines if slices are grouped into the Others slice.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series:
                    [{
                        othersCategoryThreshold: 5,
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].othersCategoryThreshold;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", othersCategoryThreshold: 5 }]);
                
    • othersCategoryType

      Type:
      enumeration
      Default:
      percent

      Gets or sets whether to use numeric or percent-based threshold value.

      Members

      • number
      • Type:string
      • .
      • percent
      • Type:string

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series:
                    [{
                        othersCategoryType: "number",
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].othersCategoryType;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", othersCategoryType: "number", }]);
                
    • outlines

      Type:
      object
      Default:
      null

      Gets or sets the palette of brushes to use for outlines on the slices.
      The value provided should be an array of css color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        outlines: ["red", "yellow", "blue"],
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].outlines;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", outlines: ["red", "yellow", "blue"] }]);
            
    • radiusFactor

      Type:
      number
      Default:
      0.9

      Gets or sets the scaling factor of the chart's radius. Value between 0 and 1.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        radiusFactor: 0.6,
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].radiusFactor;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", radiusFactor: 0.6 }]);
            
    • selectedStyle

      Type:
      object
      Default:
      null

      Gets or sets the style used when a slice is selected.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        selectedStyle: { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 },
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].selectedStyle;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", selectedStyle: { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 } }]);
            
    • showTooltip

      Type:
      bool
      Default:
      false

      Whether the series should render a tooltip.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        showTooltip: true,
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].showTooltip;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", showTooltip: true }]);
            
    • startAngle

      Type:
      number
      Default:
      0

      Gets or sets the starting angle of the chart.
      The default zero value is equivalent to 3 o'clock.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        startAngle: 90,
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].startAngle;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", startAngle: 90 }]);
            
    • tooltipTemplate

      Type:
      string
      Default:
      null

      The name of template or the template itself that chart tooltip will use to render.

      Code Sample

       
      // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        showTooltip: true,
                        tooltipTemplate: "countryTooltip",
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].tooltipTemplate;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", tooltipTemplate: "countryTooltip" }]);
      
    • type

      Type:
      enumeration
      Default:
      flat

      Gets or sets the current series type.

      Members

      • flat
      • Type:string
      • Series has flat 1-dimensional data.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        type: "flat",
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].type;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", type: "flat" }]);
            
    • valueMemberPath

      Type:
      string
      Default:
      null

      Gets or Sets the property name that contains the values.

      Code Sample

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        valueMemberPath: "Pop1990",
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        dataSource: data
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].valueMemberPath;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", valueMemberPath: "Pop1990" }]);
            
  • tooltipTemplate
    Inherited

    Type:
    string
    Default:
    null

    Gets sets template for tooltip associated with chart item.
    Example: "Value: $(ValueMemberPathInDataSource)".

    Code Sample

            // Initialize
            $("#chart").igDoughnutChart({
                tooltipTemplate: "chartTooltipTemplate"
            });
            
            // Get
            var template= $("#chart").igDoughnutChart("option", "tooltipTemplate");
            
            // Set
            $("#chart").igDoughnutChart("option", "tooltipTemplate", "chartTooltipTemplate");
          
  • width

    Type:
    enumeration
    Default:
    null

    The width of the chart. It can be set as a number in pixels, string (px) or percentage (%).

    Members

      • string
      • The widget width can be set in pixels (px) and percentage (%).
      • number
      • The widget width can be set as a number.

    Code Sample

            // Initialize
            $("#chart").igDoughnutChart({
                width : "400px"
            });
            
            // Get
            var width = $("#chart").igDoughnutChart("option", "width");
            
            // Set
            $("#chart").igDoughnutChart("option", "width", "400px");
          

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details
  • browserNotSupported

    Cancellable:
    false

    Event fired when the control is displayed on a non HTML5 compliant browser.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutchartbrowsernotsupported", function (evt, ui) {
        // do something
    });
      
    // Initialize
    $(".selector").igDoughnutChart({
        browserNotSupported: function(evt, ui) {...}
    });
    
  • dataBinding
    Inherited

    Cancellable:
    true

    Event which is raised before data binding.
    Return false in order to cancel data binding.
    Function takes first argument null and second argument ui.
    Use ui.owner to obtain reference to chart widget.
    Use ui.dataSource to obtain reference to instance of $.ig.DataSource.

    Code Sample

     
    //Delegate
    $(document).delegate(".selector", "igdoughtnutchartdatabinding", function (evt, ui) {
        // Get reference to igDoughnutChart.
        ui.owner;
         
        // Get reference to instance of $.ig.DataSource.
        ui.dataSource;
    });
      
    //Initialize
    $(".selector").igDoughnutChart({
        dataBinding: function(evt, ui) {...}
    });
    
  • dataBound
    Inherited

    Cancellable:
    false

    Event which is raised after data binding.
    Function takes first argument null and second argument ui.
    Use ui.owner to obtain reference to chart widget.
    Use ui.data to obtain reference to array actual data which is displayed by chart.
    Use ui.dataSource to obtain reference to instance of $.ig.DataSource.

    Code Sample

     
    //Delegate
    $(document).delegate(".selector", "igdoughtnutchartdatabound", function (evt, ui) {
        // Get reference to igDoughnutChart.
        ui.owner;
         
        // Get reference to igDoughnutChart's array data.
        ui.data;
         
        // Get reference to instance of $.ig.DataSource.
        ui.dataSource;
    });
      
    //Initialize
    $(".selector").igDoughnutChart({
        dataBound: function(evt, ui) {...}
    });
    
  • hideTooltip
    Inherited

    Cancellable:
    true

    Event which is raised before tooltip is hidden.
    Return false in order to cancel hiding and keep tooltip visible.
    Function takes first argument null and second argument ui.
    Use ui.owner to obtain reference to chart widget.
    Use ui.item to obtain reference to item.
    Use ui.element to obtain reference to jquery object which represents tooltip or value of ui.element from last updateTooltip event. Value of that member can be replaced by custom element.

    Code Sample

     
    //Delegate
    $(document).delegate(".selector", "igdoughtnutcharthidetooltip", function (evt, ui) {
        // Get reference to igDoughnutChart.
        ui.owner;
         
        // Get reference to the data object.
        ui.item;
         
        // Get or set the jQuery object representing the tooltip.
        ui.element;
    });
      
    //Initialize
    $(".selector").igDoughnutChart({
        hideTooltip: function(evt, ui) {...}
    });
    
  • holeDimensionsChanged

    Cancellable:
    false

    Raised when the dimensions (center point or radius) of the doughnut hole change.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutchartholedimensionschanged", function (evt, ui) {
        //Get the center of the hole.
        ui.center;
                
        // Get the options object of the doughnut chart.
        ui.doughnut;
                
        // Get the radius.
        ui.radius;
    });
    
    // Initialize
    $(".selector").igDoughnutChart({
        holeDimensionsChanged: function(evt, ui) {...}
    });
          
  • sliceClick

    Cancellable:
    false

    Raised when the slice is clicked.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutchartsliceclick", function (evt, ui) {
        // Get the options object of the doughnut chart.
        ui.doughnut;
    
        // Get an object containing information about the clicked slice.
        ui.slice;
    });
      
    // Initialize
    $(".selector").igDoughnutChart({
        sliceClick: function(evt, ui) {...}
    });
          
  • tooltipHidden

    Cancellable:
    false

    Event fired after a tooltip is hidden
    Function takes arguments evt and ui.
    Use ui.element to get reference to tooltip DOM element.
    Use ui.item to get reference to current series item object.
    Use ui.chart to get reference to chart object.
    Use ui.series to get reference to current series object.
    Use ui.actualItemBrush to get item brush.
    Use ui.actualSeriesBrush to get series brush.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutcharttooltiphidden", function (evt, ui) {
        // Get the options object of the doughnut chart.
        ui.doughnut;
    
        // Get the jQuery object containing the tooltip.
        ui.element;
        
        // Get the datasource item displayed in the tooltip.
        ui.item;
        
        // Get the current series.
        ui.series;
    });
      
    // Initialize
    $(".selector").igDoughnutChart({
        tooltipHidden: function(evt, ui) {...}
    });
          
  • tooltipHiding

    Cancellable:
    true

    Event fired when the mouse has left a series and the tooltip is about to hide
    Function takes arguments evt and ui.
    Use ui.element to get reference to tooltip DOM element.
    Use ui.item to get reference to current series item object.
    Use ui.chart to get reference to chart object.
    Use ui.series to get reference to current series object.
    Use ui.actualItemBrush to get item brush.
    Use ui.actualSeriesBrush to get series brush.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutcharttooltiphiding", function (evt, ui) {
        // Get the options object of the doughnut chart.
        ui.doughnut;
    
        // Get the jQuery object containing the tooltip.
        ui.element;
        
        // Get the datasource item displayed in the tooltip.
        ui.item;
        
        // Get the current series.
        ui.series;
    });
      
    // Initialize
    $(".selector").igDoughnutChart({
        tooltipHiding: function(evt, ui) {...}
    });
          
  • tooltipShowing

    Cancellable:
    true

    Event fired when the mouse has hovered on a series and the tooltip is about to show
    Function takes arguments evt and ui.
    Use ui.element to get reference to tooltip DOM element.
    Use ui.item to get reference to current series item object.
    Use ui.chart to get reference to chart object.
    Use ui.series to get reference to current series object.
    Use ui.actualItemBrush to get item brush.
    Use ui.actualSeriesBrush to get series brush.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutcharttooltipshowing", function (evt, ui) {
        // Get the options object of the doughnut chart.
        ui.doughnut;
    
        // Get the jQuery object containing the tooltip.
        ui.element;
        
        // Get the datasource item displayed in the tooltip.
        ui.item;
        
        // Get the current series.
        ui.series;
    });
      
    // Initialize
    $(".selector").igDoughnutChart({
        tooltipShowing: function(evt, ui) {...}
    });
          
  • tooltipShown

    Cancellable:
    false

    Event fired after a tooltip is shown
    Function takes arguments evt and ui.
    Use ui.element to get reference to tooltip DOM element.
    Use ui.item to get reference to current series item object.
    Use ui.chart to get reference to chart object.
    Use ui.series to get reference to current series object.
    Use ui.actualItemBrush to get item brush.
    Use ui.actualSeriesBrush to get series brush.

    Code Sample

     
    //Bind
    $(document).delegate(".selector", "igdoughnutcharttooltipshown", function (evt, ui) {
        // Get the options object of the doughnut chart.
        ui.doughnut;
    
        // Get the jQuery object containing the tooltip.
        ui.element;
        
        // Get the datasource item displayed in the tooltip.
        ui.item;
        
        // Get the current series.
        ui.series;
    });
      
    // Initialize
    $(".selector").igDoughnutChart({
        tooltipShown: function(evt, ui) {...}
    });
          
  • updateTooltip
    Inherited

    Cancellable:
    true

    Event which is raised before tooltip is updated.
    Return false in order to cancel updating and hide tooltip.
    Function takes first argument null and second argument ui.
    Use ui.owner to obtain reference to chart widget.
    Use ui.text to obtain html of tooltip. Value of that member can be modified. If modified value is null or empty string, then current content of tooltip keeps old value.
    Use ui.item to obtain reference to item. Value of that member can be modified or replaced by custom item.
    Use ui.x to obtain left position of tooltip in pixels relative to widget. Value of that member can be modified.
    Use ui.y to obtain top position of tooltip in pixels relative to widget. Value of that member can be modified.
    Use ui.element to obtain reference to jquery object which represents tooltip. Value of that member can be replaced by custom element.

    Code Sample

     
    //Delegate
    $(document).delegate(".selector", "igdoughnutchartupdatetooltip", function (evt, ui) {
        // Get reference to igDoughnutChart.
        ui.owner;
         
        // Get or set the tooltip HTML.
        ui.text;
         
        // Get reference to the data object.
        ui.item;
         
        // Get or set the tooltip's left position relative to the widget in pixels.
        ui.x;
         
        // Get or set the tooltip's top position relative to the widget in pixels.
        ui.y;
         
        // Get or set the jQuery object representing the tooltip.
        ui.element;
    });
      
    //Initialize
    $(".selector").igDoughnutChart({
        updateTooltip: function(evt, ui) {...}
    });
    
  • addItem
    Inherited

    .igDoughnutChart( "addItem", item:object );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Adds a new item to the data source and notifies the chart.

    • item
    • Type:object
    • The item that we want to add to the data source.

    Code Sample

     $(".selector").igDoughnutChart("addItem", dataItem); 
  • addSeries

    .igDoughnutChart( "addSeries", seriesObj:object );

    Adds a new series to the doughnut chart.

    • seriesObj
    • Type:object
    • The series object to be added.

    Code Sample

     
            $("#chart").igDoughnutChart("addSeries", {name: "series2", labelMemberPath: "Pop2008", valueMemberPath: "Pop2008", dataSource: data});
          
  • chart
    Inherited

    .igDoughnutChart( "chart" );
    Return Type:
    object
    Return Type Description:
    Returns reference to chart.

    Get reference to chart object.

    Code Sample

     
    // Not intended for use with derived widget       
    var chart = $(".selector").igDoughnutChart("chart");
     
  • dataBind
    Inherited

    .igDoughnutChart( "dataBind" );

    Binds data to the chart.

    Code Sample

     
          $("#chart").igDoughnutChart("dataBind");
          
  • destroy

    .igDoughnutChart( "destroy" );

    Destroys the widget.

    Code Sample

     
            $("#chart").igDoughnutChart("destroy");
          
  • exportVisualData

    .igDoughnutChart( "exportVisualData" );
    Return Type:
    object
    Return Type Description:
    a JavaScript object containing the visual data.

    Returns information about how the doughnut chart is rendered.

    Code Sample

     
          var visualData = $("#chart").igDoughnutChart("exportVisualData");
          
  • findIndexOfItem
    Inherited

    .igDoughnutChart( "findIndexOfItem", item:object );
    Return Type:
    number
    Return Type Description:
    Returns -1 or index of item.

    Find index of item within actual data used by chart.

    • item
    • Type:object
    • The reference to item.

    Code Sample

     var index = $(".selector").igDoughnutChart("findIndexOfItem", item); 
  • flush

    .igDoughnutChart( "flush" );

    Causes all of the series that have pending changes e.g. by changed property values to be rendered immediately.

    Code Sample

     
          $("#chart").igDoughnutChart("flush");
          
  • getCenterCoordinates

    .igDoughnutChart( "getCenterCoordinates" );
    Return Type:
    object
    Return Type Description:
    a JavaScript object specifying x and y coordinates of the point.

    Returns the center of the doughnut chart.

    Code Sample

     
          var point = $("#chart").igDoughnutChart("getCenterCoordinates");
          // returns the x coordinate of the center
          point.x
          // returns the y coordinate of the center
          point.y
          
  • getData

    .igDoughnutChart( "getData", series:string );
    Return Type:
    object
    Return Type Description:
    Data source for the specified series or array of all series sources if the parameter is omitted.

    Returns data source of the series.

    • series
    • Type:string
    • Optional. The series name. If not provided an array of series data sources is returned.

    Code Sample

     var data = $(".selector").igDoughnutChart("getData"); 
  • getDataItem
    Inherited

    .igDoughnutChart( "getDataItem", index:object );
    Return Type:
    object
    Return Type Description:
    Returns null or reference to data item.

    Get item within actual data used by chart. That is similar to this.getData()[ index ].

    • index
    • Type:object
    • Index of data item.

    Code Sample

     var item = $(".selector").igDoughnutChart("getDataItem", 0); 
  • getHoleRadius

    .igDoughnutChart( "getHoleRadius" );
    Return Type:
    number

    Returns the radius of the chart's hole.

    Code Sample

     
            var radius = $("#chart").igDoughnutChart("getHoleRadius");
          
  • insertItem
    Inherited

    .igDoughnutChart( "insertItem", item:object, index:number );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Inserts a new item to the data source and notifies the chart.

    • item
    • Type:object
    • the new item that we want to insert in the data source.
    • index
    • Type:number
    • The index in the data source where the new item will be inserted.

    Code Sample

     var chart = $(".selector").igDoughnutChart("insertItem", item, 9); 
  • notifyClearItems
    Inherited

    .igDoughnutChart( "notifyClearItems", dataSource:object );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Notifies the chart that the items have been cleared from an associated data source.
    It's not necessary to notify more than one target of a change if they share the same items source.

    • dataSource
    • Type:object
    • The data source in which the change happened.

    Code Sample

     var chart = $(".selector").igDoughnutChart("notifyClearItems", dataSource); 
  • notifyInsertItem
    Inherited

    .igDoughnutChart( "notifyInsertItem", dataSource:object, index:number, newItem:object );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Notifies the target axis or series that an item has been inserted at the specified index in its data source.
    It's not necessary to notify more than one target of a change if they share the same items source.

    • dataSource
    • Type:object
    • The data source in which the change happened.
    • index
    • Type:number
    • The index in the items source where the new item has been inserted.
    • newItem
    • Type:object
    • the new item that has been set in the collection.

    Code Sample

     var chart = $(".selector").igDoughnutChart("notifyInsertItem", dataSource, 9, newItem); 
  • notifyRemoveItem
    Inherited

    .igDoughnutChart( "notifyRemoveItem", dataSource:object, index:number, oldItem:object );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Notifies the target axis or series that an item has been removed from the specified index in its data source.
    It's not necessary to notify more than one target of a change if they share the same items source.

    • dataSource
    • Type:object
    • The data source in which the change happened.
    • index
    • Type:number
    • The index in the items source from where the old item has been removed.
    • oldItem
    • Type:object
    • the old item that has been removed from the collection.

    Code Sample

     var chart = $(".selector").igDoughnutChart("notifyRemoveItem", dataSource, 0, oldItem); 
  • notifySetItem
    Inherited

    .igDoughnutChart( "notifySetItem", dataSource:object, index:number, newItem:object, oldItem:object );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Notifies the chart that an item has been set in an associated data source.

    • dataSource
    • Type:object
    • The data source in which the change happened.
    • index
    • Type:number
    • The index in the items source that has been changed.
    • newItem
    • Type:object
    • the new item that has been set in the collection.
    • oldItem
    • Type:object
    • the old item that has been overwritten in the collection.

    Code Sample

     var chart = $(".selector").igDoughnutChart("notifySetItem", dataSource, 0, newItem, oldItem); 
  • removeItem
    Inherited

    .igDoughnutChart( "removeItem", index:number );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Deletes an item from the data source and notifies the chart.

    • index
    • Type:number
    • The index in the data source from where the item will be been removed.

    Code Sample

     var chart = $(".selector").igDoughnutChart("removeItem", 0); 
  • removeSeries

    .igDoughnutChart( "removeSeries", seriesObj:object );

    Removes the specified series from the doughnut chart.

    • seriesObj
    • Type:object
    • The series object identifying the series to be removed.

    Code Sample

     
            $("#chart").igDoughnutChart("removeSeries", {name: "series2"});
          
  • setItem
    Inherited

    .igDoughnutChart( "setItem", index:number, item:object );
    Return Type:
    object
    Return Type Description:
    Returns a reference to this chart.

    Updates an item in the data source and notifies the chart.

    • index
    • Type:number
    • The index of the item in the data source that we want to change.
    • item
    • Type:object
    • The new item object that will be set in the data source.

    Code Sample

     var chart = $(".selector").igDoughnutChart("setItem", 0, item); 
  • updateSeries

    .igDoughnutChart( "updateSeries", value:object );

    Updates the series with the specified name with the specified new property values.

    • value
    • Type:object
    • The series object identifying the series to be updated.

    Code Sample

     
          $("#chart").igDoughnutChart("updateSeries", {name: "series1", labelMemberPath: "Pop2008", valueMemberPath: "Pop2008"});
          
  • ui-doughnut ui-corner-all ui-widget-content

    Get the class applied to main element: ui-doughnut ui-corner-all ui-widget-content.
  • ui-doughnut-tooltip ui-widget-content ui-corner-all

    Get the class applied to the tooltip element: ui-doughnut-tooltip ui-widget-content ui-corner-all.
  • ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

    Get the class applied to main element, shown when the chart is opened in a non HTML5 compatible browser.

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