Ignite UI API Reference

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-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.datasource.js
infragistics.dv.core.js
infragistics.dvcommonwidget.js
infragistics.templating.js
infragistics.ui.chartlegend.js
infragistics.ui.basechart.js
infragistics.chart_piechart.js

Inherits

  • allowSliceExplosion

    Type:
    bool
    Default:
    null

    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:
    null

    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);
          
  • &nbsp;dataSource

    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.

  • &nbsp;dataSourceType

    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.

  • &nbsp;dataSourceUrl

    Type:
    string
    Default:
    null

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

  • &nbsp;height

    Type:
    number
    Default:
    null

    The height of the chart.

  • 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);
          
  • &nbsp;maxRecCount

    Type:
    number
    Default:
    null

    Gets sets maximum number of displayed records in chart.

  • &nbsp;responseDataKey

    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.

  • &nbsp;responseTotalRecCountKey

    Type:
    string
    Default:
    null

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

  • 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 Brushes property.
      The brushes property defines the palette from which automatically assigned slice brushes are selected.
      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(); } }]);
                
    • 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

       
              // Initialize
              $("#chart").igDoughnutChart({
                 series: 
                    [{
                        itemsSource: [
                      { "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 }
                    ],
                        name: "Pop1990",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop1990"
                    }]
              });
              
              // Get
              var series = $("#chart").igDoughnutChart("option", "series");
              series[0].itemsSource;
              
              // Set
              $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", itemsSource: [
                      { "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 }]}]);
                
    • 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
      • No labels will be displayed.
      • center
      • Type:string
      • Labels will be displayed in the center.
      • insideEnd
      • Type:string
      • Labels will be displayed inside and by the edge of the container.
      • outsideEnd
      • Type:string
      • Labels will be displayed outside the container.
      • bestFit
      • Type:string
      • Labels will automatically decide their location.

      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.

    • 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
      • A straight line is drawn between the slice and its label.
      • arc
      • Type:string
      • A curved line is drawn between the slice and its label. The line follows makes a natural turn from the slice to the label.
      • spline
      • Type:string
      • A curved line is drawn between the slice and its label. The line starts radially from the slice and then turns to the label.

      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") }]);
                
    • 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
      • Data value is compared directly to the value of OthersCategoryThreshold.
      • percent
      • Type:string
      • Data value is compared to OthersCategoryThreshold as a percentage of the total.

      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 Outlines property.
      The Outlines property defines the palette from which automatically assigned slice outlines are selected.
      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.

    • 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 }]);
            
    • toolTip

      Type:
      object
      Default:
      null

      Gets or sets the ToolTip for the pie chart.

    • tooltipTemplate

      Type:
      string
      Default:
      null

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

    • type

      Type:
      enumeration
      Default:
      flat

      Gets or sets the current series type.

      Members

      • flat
      • Type:string
      • Series has flat 1-dimensional data.
    • 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" }]);
            
  • &nbsp;tooltipTemplate

    Type:
    string
    Default:
    null

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

  • &nbsp;width

    Type:
    number
    Default:
    null

    The width of the chart.

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) {...}
    });
    
  • &nbsp;dataBinding

    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.

  • &nbsp;dataBound

    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.

  • &nbsp;hideTooltip

    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.

  • 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) {...}
    });
          
  • &nbsp;updateTooltip

    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.

  • &nbsp;addItem

    .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.
  • 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});
          
  • &nbsp;chart

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

    Get reference to chart object.

  • &nbsp;dataBind

    .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");
          
  • &nbsp;findIndexOfItem

    .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.
  • 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
          
  • &nbsp;getData

    .igDoughnutChart( "getData" );
    Return Type:
    array
    Return Type Description:
    Returns null or reference to data.

    Get reference of actual data used by chart.

  • &nbsp;getDataItem

    .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.
  • getHoleRadius

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

    Returns the radius of the chart's hole.

    Code Sample

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

    .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.
  • &nbsp;notifyClearItems

    .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.
  • &nbsp;notifyInsertItem

    .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.
  • &nbsp;notifyRemoveItem

    .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.
  • &nbsp;notifySetItem

    .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.
  • &nbsp;removeItem

    .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.
  • 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"});
          
  • &nbsp;setItem

    .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.
  • 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 - 2018 Infragistics, Inc. All rights reserved.

#