Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.

Infragistics NetAdvantage jQuery API Reference

ui.igPieChart

ui.igPieChart_image

The igPieChart control is a HTML 5 jQuery Chart based on NetAdvantage® for Silverlight Data Visualization xamPieChart™ control. 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 igPieChart control.

For details on how to reference the required scripts and themes for the igPieChart control read, Using JavaScript Resouces in NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.

Code Sample

<!doctype html>
<html>
<head>
    <title>Infragistics NetAdvantage for jQuery igGridGroupBy</title>
    <!-- Infragistics Combined CSS -->
    <link href="themes/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="themes/base/ig.ui.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->
    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/ig.ui.js" type="text/javascript"></script>
    <script src="js/ig.ui.chart.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var data = [
                    { "Budget": 60, "Label": "Administration" },
                    { "Budget": 40, "Label": "Sales" },
                    { "Budget": 60, "Label": "IT" },
                    { "Budget": 40, "Label": "Marketing" },
                    { "Budget": 60, "Label": "Development" },
                    { "Budget": 20, "Label": "Support" }
                ];

            $("#chart").igPieChart({
                dataSource: data,
                width: "500px",
                height: "500px",
                valueMemberPath: "Budget",
                labelMemberPath: "Label",
                explodedSlices: "0 1",
                radiusFactor: .8,
                legend: {
                    element: "legend",
                    type: "item"
                }
            });
        });
    </script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

Related Samples

Dependencies

  • allowSliceExplosion

    Type:
    bool
    Default:
    null

    Gets or sets whether the slices can be exploded.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            allowSliceExplosion : true
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "allowSliceExplosion");
        
        //Set
        $(".selector").igPieChart("option", "allowSliceExplosion", true);

  • allowSliceSelection

    Type:
    bool
    Default:
    null

    Gets or sets whether the slices can be selected.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            allowSliceSelection : true
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "allowSliceSelection");
        
        //Set
        $(".selector").igPieChart("option", "allowSliceSelection", true);

  • 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. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            brushes: [ "#ff0000", "#ffff00", "#00ffff" ]
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "brushes");
        
        //Set
        $(".selector").igPieChart("option", "brushes", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • dataSource

    Type:
    object
    Default:
    null

    Can be any valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.

    Code Sample

    	      //Initialize
        var data1 = [
            { "ID": 1, "Cost": 12.5 }, 
            { "ID": 2, "Cost": 18.56 }, 
            { "ID": 3, "Cost": 22.18 }
          ];
        $(".selector").igPieChart({
            dataSource: data1
        });

        //Get
        var opValue = $(".selector").igPieChart("option", "dataSource");

        //Set
        var data1 = [
            { "ID": 1, "Cost": 12.5 }, 
            { "ID": 2, "Cost": 18.56 }, 
            { "ID": 3, "Cost": 22.18 }
          ];
        $(".selector").igPieChart("option", "dataSource", data1);

  • dataSourceType

    Type:
    string
    Default:
    null

    Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource and its type property.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            dataSourceType: "array"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "dataSourceType");
        
        //Set
        $(".selector").igPieChart("option", "dataSourceType", "array");

  • dataSourceUrl

    Type:
    string
    Default:
    null

    Specifies a remote URL accepted by $.ig.DataSource in order to request data from it.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            dataSourceUrl: "http://www.example.com"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "dataSourceUrl");
        
        //Set
        $(".selector").igPieChart("option", "dataSourceUrl", "http://www.example.com");

  • explodedRadius

    Type:
    number
    Default:
    0.2

    Determines how much the exploded slice is offset from the center. Value between 0 and 1.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            explodedRadius: 0.35
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "explodedRadius");
        
        //Set
        $(".selector").igPieChart("option", "explodedRadius", 0.35);

  • explodedSlices

    Type:
    object
    Default:
    null

    Gets or sets the collection of exploded slice indices.

  • height

    Type:
    enumeration
    Default:
    500

    Members

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

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            height: 250
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "height");

  • itemsSource

    Type:
    object
    Default:
    null

    Gets or sets the data source for the chart.

  • 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

    	      //Initialize
        $(".selector").igPieChart({
            labelExtent: 15
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "labelExtent");
        
        //Set
        $(".selector").igPieChart("option", "labelExtent", 15);

  • labelMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the property name that contains the labels.

    Code Sample

    	      //Initialize
	      var data1 = [
            { "Department": "Accounting", "Cost": 12.5 }, 
            { "Department": "Marketing", "Cost": 18.56 }, 
            { "Department": "R&D", "Cost": 22.18 }
          ];
	      $(".selector").igPieChart({
	          labelMemberPath: "Department"
	      });

	      //Get
	      var opValue = $(".selector").igPieChart("option", "labelMemberPath");

	      //Set
	      var data1 = [
            { "Department": "Accounting", "Cost": 12.5 }, 
            { "Department": "Marketing", "Cost": 18.56 }, 
            { "Department": "R&D", "Cost": 22.18 }
          ];
	      $(".selector").igPieChart("option", "labelMemberPath", "Department");

  • labelsPosition

    Type:
    enumeration
    Default:
    center

    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
        $(".selector").igPieChart({
            labelsPosition: "bestFit"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "labelsPosition");
        
        //Set
        $(".selector").igPieChart("option", "labelsPosition", "bestFit");

  • leaderLineVisibility

    Type:
    enumeration
    Default:
    visible

    Members

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

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            leaderLineVisibility: "collapsed"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "leaderLineVisibility");
        
        //Set
        $(".selector").igPieChart("option", "leaderLineVisibility", "collapsed");

  • legend

    Type:
    object
    Default:
    null

    Gets or sets the legend used for the current chart.

  • legendItemBadgeTemplate

    Type:
    object
    Default:
    null

    Gets or sets the LegendItemBadgeTemplate property.
    The legend item badge is created according to the LegendItemBadgeTemplate on-demand by
    the chart object itself.

  • legendItemTemplate

    Type:
    object
    Default:
    null

    Gets or sets the LegendItemTemplate property.
    The legend item control content is created according to the LegendItemTemplate on-demand by
    the chart object itself.

  • othersCategoryText

    Type:
    string
    Default:
    others

    Gets or sets the label of the Others slice.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            othersCategoryText: "Other Countries"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "othersCategoryText");
        
        //Set
        $(".selector").igPieChart("option", "othersCategoryText", "Other Countries");

  • othersCategoryThreshold

    Type:
    number
    Default:
    3

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

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            othersCategoryThreshold: 8
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "othersCategoryThreshold");
        
        //Set
        $(".selector").igPieChart("option", "othersCategoryThreshold", 8);

  • othersCategoryType

    Type:
    enumeration
    Default:
    percent

    Members

    • percent
    • Type:string
    • Data value is compared to OthersCategoryThreshold as a percentage of the total.
    • number
    • Type="string" Data value is compared directly to the value of OthersCategoryThreshold.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            othersCategoryType: "percent"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "othersCategoryType");
        
        //Set
        $(".selector").igPieChart("option", "othersCategoryType", "percent");

  • 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. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            outlines: [ "#ff0000", "#ffff00", "#00ffff" ]
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "outlines");
        
        //Set
        $(".selector").igPieChart("option", "outlines", [ "#ff0000", "#ffff00", "#00ffff" ]);

  • 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
        $(".selector").igPieChart({
            radiusFactor: 0.75
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "radiusFactor");
        
        //Set
        $(".selector").igPieChart("option", "radiusFactor", 0.75);

  • responseDataKey

    Type:
    enumeration
    Default:
    null

    See $.ig.DataSource.

    Members

    • null
    • Type:object
    • string
    • Specifies the name of the property in which data records are held if the response is wrapped.

  • responseDataType

    Type:
    enumeration
    Default:
    null

    Members

    • null
    • Type:object
    • string
    • Explicitly set data source type (such as "json"). Please refer to the documentation of $.ig.DataSource and its type property.

  • 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
        $(".selector").igPieChart({
            startAngle: 3
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "startAngle");
        
        //Set
        $(".selector").igPieChart("option", "startAngle", 3);

  • sweepDirection

    Type:
    enumeration
    Default:
    clockwise

    Members

    • counterclockwise
    • Type:string
    • clockwise
    • Type:string

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            sweepDirection: "counterclockwise"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "sweepDirection");
        
        //Set
        $(".selector").igPieChart("option", "sweepDirection", "counterclockwise");

  • textStyle

    Type:
    string
    Default:
    null

    Manually overrides the style to use for the labels.

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            textStyle: "pieLabel"
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "textStyle");
        
        //Set
        $(".selector").igPieChart("option", "textStyle", "pieLabel");

  • toolTip

    Type:
    object
    Default:
    null

    Gets or sets the ToolTip for the pie chart.

  • valueMemberPath

    Type:
    string
    Default:
    null

    Gets or Sets the property name that contains the values.

    Code Sample

    	      //Initialize
	      var data1 = [
            { "Department": "Accounting", "Cost": 12.5 }, 
            { "Department": "Marketing", "Cost": 18.56 }, 
            { "Department": "R&D", "Cost": 22.18 }
          ];
	      $(".selector").igPieChart({
	          valueMemberPath: "Cost"
	      });

	      //Get
	      var opValue = $(".selector").igPieChart("option", "valueMemberPath");

	      //Set
	      var data1 = [
            { "Department": "Accounting", "Cost": 12.5 }, 
            { "Department": "Marketing", "Cost": 18.56 }, 
            { "Department": "R&D", "Cost": 22.18 }
          ];
	      $(".selector").igPieChart("option", "valueMemberPath", "Cost");

  • width

    Type:
    enumeration
    Default:
    500

    Members

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

    Code Sample

    	      //Initialize
        $(".selector").igPieChart({
            width: 250
        });
        
        //Get
        var opValue = $(".selector").igPieChart("option", "width");

For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery

Show Details

  • browserNotSupported

    Cancellable:
    false

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

  • sliceClick

    Cancellable:
    false

    Raised when the slice is clicked.

  • tooltipHidden

    Cancellable:
    false

    Event fired after a tooltip is hidden.

  • tooltipHiding

    Cancellable:
    true

    Event fired when the mouse has left an element and the tooltip is about to hide.

  • tooltipShowing

    Cancellable:
    true

    Event fired when the mouse has hovered on an element long enough to display a tooltip.

  • tooltipShown

    Cancellable:
    false

    Event fired after a tooltip is shown.

  • addItem

    .igPieChart( "addItem", item:object );

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

    • item
    • Type:object
    • the new item that will be added to the data source.

    Code Sample

    		    $(".selector").igPieChart("addItem", {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75} );

  • destroy

    .igPieChart( "destroy" );

    Code Sample

    		    $(".selector").igPieChart("destroy");

  • id

    .igPieChart( "id" );
    Return Type:
    string

    Returns the ID of the parent div element bounding the ruler and the tooltip container.

    Code Sample

    		    var containerElement = $(".selector").igPieChart("id");

  • insertItem

    .igPieChart( "insertItem", item:object, index:number );

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

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

    Code Sample

    		    $(".selector").igPieChart("insertItem", {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75}, 5 );

  • removeItem

    .igPieChart( "removeItem", index:number );

    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

    		    $(".selector").igPieChart("removeItem", 5 );

  • setItem

    .igPieChart( "setItem", index:number, item:object );

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

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

    Code Sample

    		    $(".selector").igPieChart("setItem", 5, {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75} );

  • ui-corner-all ui-widget-content

    Get or set the class applied on a div element.

  • ui-chart-non-html5-supported-message ui-helper-clearfix

    Get or set the class applied on a div element, shown when the chart is opened in a non HTML5 compatible browser.