ui.igFunnelChart

ui.igFunnelChart_image

The igFunnelChart™ is a funnel chart control that displays data in a funnel shape. It displays sections in a top-down composition each representing the data as slices from largest value to the smallest value.

The following code snippet demonstrates how to initialize the igFunnelChart control with column fixing feature.

Click here for more information on how to get started using this API . For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->   
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.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>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.dv.js" type="text/javascript"></script>
    <script type="text/javascript">
        var data = [
            { Budget: 30, Department: "Administration" },
            { Budget: 50, Department: "Sales" },
            { Budget: 60, Department: "IT" },
            { Budget: 50, Department: "Marketing" },
            { Budget: 100, Department: "Development" },
            { Budget: 20, Department: "Support" }
        ]; 

        $(function () {
            $("#chart").igFunnelChart({
                width: "100%",
                height: "450px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible"
            });
        });
    </script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

Related Samples

Related Topics

Dependencies

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

Inherits

  • allowSliceSelection

    Type:
    bool
    Default:
    false

    Gets or sets whether to allow slices to be selected.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        allowSliceSelection : true
    });
     
    // Get
    var selection = $(".selector").igFunnelChart("option", "allowSliceSelection");
    
    // Set
    $(".selector").igFunnelChart("option", "allowSliceSelection", true);          
  • bezierPoints

    Type:
    string
    Default:
    null

    Gets or sets values for upper and lower bezier points. That option has effect only when useBezierCurve is enabled.
    Value should provide 4 numeric values in range from 0 to 1 separated by space character.
    The first number defines upper-x position, second: upper-y, third: lower-x, fourth: lower-y.
    The null or invalid value will reset internal default, which is "0.5 0 0.5 1".
    Example:
    bezierPoints: "0.4 0.1 0.6 1".

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        bezierPoints : "0.3 0.1 0.7 1"
    });
     
    // Get
    var points = $(".selector").igFunnelChart("option", "bezierPoints");
    
    // Set
    $(".selector").igFunnelChart("option", "bezierPoints", "0.3 0.1 0.7 1");        
  • bottomEdgeWidth

    Type:
    number
    Default:
    0.35

    Gets or sets the percentage (from near 0 to 1) of space the bottom edge of the funnel should take.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        bottomEdgeWidth : 1
    });
     
    // Get
    var width = $(".selector").igFunnelChart("option", "bottomEdgeWidth");
    
    // Set
    $(".selector").igFunnelChart("option", "bottomEdgeWidth", 1);         
  • 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
    $(".selector").igFunnelChart({
        brushes: ["#7DC3D9", "#3e5354", "#9EB5B4", "#5DD1C6", "#AFD1CE", "#2B768E"]
    });
     
    // Get
    var brushes = $(".selector").igFunnelChart("option", "brushes");
    
    // Set
    $(".selector").igFunnelChart("option", "brushes", ["#7DC3D9", "#3e5354", "#9EB5B4", "#5DD1C6", "#AFD1CE", "#2B768E"]);            
          
  • 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

     
    // Given the following data...
    var data1 = [
        { "ID": 1, "Cost": 12.5 },
        { "ID": 2, "Cost": 18.56 },
        { "ID": 3, "Cost": 22.18 }];
         
    // Initialize
    $(".selector").igFunnelChart({
        dataSource: data1
    });
    
    // Get
    var dataSource = $(".selector").igFunnelChart("option", "dataSource");
    
    // Set
    $(".selector").igFunnelChart("option", "dataSource", data1);
    	  
  • 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").igFunnelChart({
        dataSourceType: "array"
    });
             
    // Get
    var dataSourceType = $(".selector").igFunnelChart("option", "dataSourceType");
             
    // Set
    $(".selector").igFunnelChart("option", "dataSourceType", "array");
    	  
  • dataSourceUrl
    Inherited

    Type:
    string
    Default:
    null

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

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        dataSourceUrl: "http://www.example.com"
    });
             
    // Get
    var dataUrl = $(".selector").igFunnelChart("option", "dataSourceUrl");
             
    // Set
    $(".selector").igFunnelChart("option", "dataSourceUrl", "http://www.example.com");
    	  
  • formatInnerLabel

    Type:
    object
    Default:
    null

    Gets or sets the formatter function for inner labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.

    Code Sample

     
    function formatFunction(val) {
        return "Label: " + val;
    };      
    
    // Initialize
    $(".selector").igFunnelChart({
        formatInnerLabel : formatFunction
    });
     
    // Get
    var func = $(".selector").igFunnelChart("option", "formatInnerLabel");
    
    // Set
    $(".selector").igFunnelChart("option", "formatInnerLabel", formatFunction);        
  • formatOuterLabel

    Type:
    object
    Default:
    null

    Gets or sets the formatter function for outer labels. Function should return string and it takes 3 parameters: 1st-value of item to format, 2nd-index of item within data, 3rd-reference to the funnel chart.

    Code Sample

     
    function formatFunction(val) {
        return "Label: " + val;
    };      
    
    // Initialize
    $(".selector").igFunnelChart({
        formatOuterLabel : formatFunction
    });
     
    // Get
    var func = $(".selector").igFunnelChart("option", "formatOuterLabel");
    
    // Set
    $(".selector").igFunnelChart("option", "formatOuterLabel", formatFunction);        
  • funnelSliceDisplay

    Type:
    enumeration
    Default:
    null

    Gets or sets how the heights of the funnel slices should be configured.

    Members

    • uniform
    • Type:string
    • The slice heights should be uniform.
    • weighted
    • Type:string
    • The slice heights should be weighted by value.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        funnelSliceDisplay : "uniform"
    });
     
    // Get
    var display = $(".selector").igFunnelChart("option", "funnelSliceDisplay");
    
    // Set
    $(".selector").igFunnelChart("option", "funnelSliceDisplay", "uniform");   
    
  • height
    Inherited

    Type:
    number
    Default:
    null

    The height of the chart.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        height: 250
    });
     
    // Get
    var height = $(".selector").igFunnelChart("option", "height");
      
    // Set
    $(".selector").igFunnelChart("option", "height", 250);
    	  
  • highlightedValueMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the highlighted value member path for the funnel chart.

  • highlightValueDisplayMode

    Type:
    enumeration
    Default:
    auto

    Gets or sets whether and how to display the highlighted value.

    Members

    • auto
    • Type:string
    • .
    • hidden
    • Type:string
    • .
    • overlay
    • Type:string
  • highlightValueOpacity

    Type:
    number
    Default:
    0.5

    Gets or sets the opacity while highlighting.

  • innerLabelMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the InnerLabel mapping property for the current series object.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        innerLabelMemberPath : "value"
    });
     
    // Get
    var path = $(".selector").igFunnelChart("option", "innerLabelMemberPath");
    
    // Set
    $(".selector").igFunnelChart("option", "innerLabelMemberPath", "value");     
  • innerLabelVisibility

    Type:
    enumeration
    Default:
    visible

    Gets or sets whether the inner labels are visible.

    Members

    • visible
    • Type:string
    • Display the element.
    • collapsed
    • Type:string
    • Do not display the element.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        innerLabelVisibility : "visible"
    });
     
    // Get
    var visibility = $(".selector").igFunnelChart("option", "innerLabelVisibility");
    
    // Set
    $(".selector").igFunnelChart("option", "innerLabelVisibility", "visible");          
  • isInverted

    Type:
    bool
    Default:
    false

    Gets or sets if the funnel should be rendered inverted.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        isInverted : true
    });
     
    // Get
    var inverted = $(".selector").igFunnelChart("option", "isInverted");
    
    // Set
    $(".selector").igFunnelChart("option", "isInverted", true);        
  • legend

    Type:
    object
    Default:
    null

    Gets or sets the Legend for the chart.
    The value of that option can be a string with the id of existing html element. That element should be empty and it will be used to create igChartLegend widget.
    If element was not found, then new DIV element is created and inserted into parent after chart element.
    Value of that option can be an object with member "element", which contains the id of legend-element.
    In this case, that object also may contain options supported by the igChartLegend widget, such as "width", "height" and events, such as "legendItemMouseLeftButtonDown", "legendItemMouseEnter", etc.
    Examples:
    legend: {}
    legend: "idOfDiv"
    legend: { element: "idOfDiv", width: 300 }
    legend: { legendItemMouseLeftButtonDown: function (evt, ui) { ui.chart.toggleSelection(ui.item); } }.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        legend : "legendId"
    });
     
    // Get
    var legend = $(".selector").igFunnelChart("option", "legend");
    
    // Set
    $(".selector").igFunnelChart("option", "legend", "legendId");         
  • legendItemBadgeTemplate

    Type:
    object
    Default:
    null

    Gets or sets the LegendItemBadgeTemplate to use for the legend items.
    The provided object should have properties called render and optionally measure.
    These are functions which will be called that will be called to handle the user specified custom rendering.
    measure will be passed an object that looks like this:
    {
    context: [either a DOM element or a CanvasContext2D depending on the particular template scenario],
    width: [if value is present, specifies the available width, user may set to desired width for content],
    height: [if value is present, specifies the available height, user may set to desired height for content],
    isConstant: [user should set to true if desired with and height will always be the same for this template],
    data: [if present, represents the contextual data for this template]
    }
    render will be passed an object that looks like this:
    {
    context: [either a DOM element or a CanvasContext2D depending on the particular template scenario],
    xPosition: [if present, specifies the x position at which to render the content],
    yPosition: [if present, specifies the y position at which to render the content],
    availableWidth: [if present, specifies the available width in which to render the content],
    availableHeight: [if present, specifies the available height in which to render the content],
    data: [if present, specifies the data that is in context for this content],
    isHitTestRender: [if true, indicates that this is a special render pass for hit testing, in which case the brushes from the data should be used]
    }.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
    	legendItemBadgeTemplate: {
    		measure: function(measureInfo) {
    			measureInfo.context;    // either a DOM element or a CanvasContext2D depending on the particular template scenario
    			measureInfo.width;      // if value is present, specifies the available width, user may set to desired width for content
    			measureInfo.height;     // if value is present, specifies the available height, user may set to desired height for content
    			measureInfo.isConstant; // user should set to true if desired with and height will always be the same for this template
    			measureInfo.data;       // if present, represents the contextual data for this template]
    		},
    		render: function (renderInfo) {
    			renderInfo.context;            //    either a DOM element or a CanvasContext2D depending on the particular template scenario
    			renderInfo.xPosition;          //    if present, specifies the x position at which to render the content
    			renderInfo.yPosition;          //    if present, specifies the y position at which to render the content
    			renderInfo.availableWidth;     //    if present, specifies the available width in which to render the content
    			renderInfo.availableHeight;    //    if present, specifies the available height in which to render the content
    			renderInfo.data;               //    if present, specifies the data that is in context for this content
    			renderInfo.isHitTestRender;    //    if true, indicates that this is a special render pass for hit testing, in which case the brushes from the data should be used
    		}
    	}
    });
    	  
  • maxRecCount
    Inherited

    Type:
    number
    Default:
    0

    Gets sets maximum number of displayed records in chart.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        maxRecCount: 10
    });
      
    // Get
    var maxRecCount = $(".selector").igFunnelChart("option", "maxRecCount");
      
    // Set
    $(".selector").igFunnelChart("option", "maxRecCount", 10);
    	  
  • outerLabelAlignment

    Type:
    enumeration
    Default:
    null

    Gets or sets which side of the chart the outer labels should appear.

    Members

    • left
    • Type:string
    • The labels will be displayed to the left of the chart.
    • right
    • Type:string
    • The labels will be displayed to the right of the chart.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        outerLabelAlignment : "left"
    });
     
    // Get
    var alignment = $(".selector").igFunnelChart("option", "outerLabelAlignment");
    
    // Set
    $(".selector").igFunnelChart("option", "outerLabelAlignment", "left");         
  • outerLabelMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the OuterLabel mapping property for the current series object.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        outerLabelMemberPath : "value"
    });
     
    // Get
    var path = $(".selector").igFunnelChart("option", "outerLabelMemberPath");
    
    // Set
    $(".selector").igFunnelChart("option", "outerLabelMemberPath", "value");         
  • outerLabelTextColor

    Type:
    string
    Default:
    null

    Gets or sets the brush used for the outer labels.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        outerLabelTextColor : "black"
    });
     
    // Get
    var textColor = $(".selector").igFunnelChart("option", "outerLabelTextColor");
    
    // Set
    $(".selector").igFunnelChart("option", "outerLabelTextColor", "black");
    	  
  • outerLabelTextStyle

    Type:
    string
    Default:
    null

    Gets or sets the text style for outer labels.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        outerLabelTextStyle : "16pt Verdona"
    });
     
    // Get
    var textStyle = $(".selector").igFunnelChart("option", "outerLabelTextStyle");
    
    // Set
    $(".selector").igFunnelChart("option", "outerLabelTextStyle", "16pt Verdona");
    	  
  • outerLabelVisibility

    Type:
    enumeration
    Default:
    collapsed

    Gets or sets whether the outer labels are visible.

    Members

    • visible
    • Type:string
    • Display the element.
    • collapsed
    • Type:string
    • Do not display the element.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        outerLabelVisibility : "visible"
    });
     
    // Get
    var visibility = $(".selector").igFunnelChart("option", "outerLabelVisibility");
    
    // Set
    $(".selector").igFunnelChart("option", "outerLabelVisibility", "visible");           
  • 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
    $(".selector").igFunnelChart({
        outlines : [ "#3189A6", "#212D2E", "#5C7877", "#2FA498", "#487D78", "#163F4B" ]
    });
     
    // Get
    var visibility = $(".selector").igFunnelChart("option", "outlines");
    
    // Set
    $(".selector").igFunnelChart("option", "outlines", [ "#3189A6", "#212D2E", "#5C7877", "#2FA498", "#487D78", "#163F4B" ]);       
  • outlineThickness

    Type:
    number
    Default:
    -1

    Gets or sets the thickness of outline around slices.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        outlineThickness : 1
    });
     
    // Get
    var thickness = $(".selector").igFunnelChart("option", "outlineThickness");
    
    // Set
    $(".selector").igFunnelChart("option", "outlineThickness", 1);        
  • pixelScalingRatio

    Type:
    number
    Default:
    NaN

    Gets or sets the scaling value used to affect the pixel density of the control.
    A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
    to appear blurry.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        pixelScalingRatio: 2
    });
     
    // Get
    var pixelScalingRatio = $(".selector").igFunnelChart("option", "pixelScalingRatio");
    
    // Set
    $(".selector").igFunnelChart("option", "pixelScalingRatio", 2);
    	  
  • 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").igFunnelChart({
        responseDataKey: "Records"
    });
      
    // Get
    var responseDataKey = $(".selector").igFunnelChart("option", "responseDataKey");
     
    // Set
    $(".selector").igFunnelChart("option", "responseDataKey", "Records");
    	  
  • responseTotalRecCountKey
    Inherited

    Type:
    string
    Default:
    null

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

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        responseTotalRecCountKey: "RecordCount"
    });
      
    // Get
    var responseTotalRecCountKey = $(".selector").igFunnelChart("option", "responseTotalRecCountKey");
     
    // Set
    $(".selector").igFunnelChart("option", "responseTotalRecCountKey", "RecordCount");
    	  
  • selectedSliceStyle

    Type:
    object
    Default:
    null

    Gets or sets the style to use for selected slices.
    That can be used to set stroke (outline color), fill (background color) and opacity.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        selectedSliceStyle: {
            fill: "lightblue",
            stroke: "black"
        }
    });
     
    // Get
    var style = $(".selector").igFunnelChart("option", "selectedSliceStyle");
    
    // Set
    $(".selector").igFunnelChart("option", "selectedSliceStyle", { fill: "lightblue", stroke: "black" });            
         
  • textColor

    Type:
    string
    Default:
    null

    Gets or sets the brush used for the inner labels.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        textColor : "white"
    });
     
    // Get
    var textColor = $(".selector").igFunnelChart("option", "textColor");
    
    // Set
    $(".selector").igFunnelChart("option", "textColor", "white"); 
    	  
  • textStyle

    Type:
    string
    Default:
    null

    Gets or sets the text style for inner labels.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        textStyle : "white"
    });
     
    // Get
    var textStyle = $(".selector").igFunnelChart("option", "textStyle");
    
    // Set
    $(".selector").igFunnelChart("option", "textStyle", "white"); 
    	  
  • tooltipTemplate
    Inherited

    Type:
    string
    Default:
    null

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

    Code Sample

     
    // Given the following data...
    var data1 = [
        { "ID": 1, "Cost": 12.5 },
        { "ID": 2, "Cost": 18.56 },
        { "ID": 3, "Cost": 22.18 }];
     
    // And the following template...
    <script id="chartTooltip" type="text/x-jquery-tmpl">
        <div>
            This is custom tooltip content.<br />
            <span>${item.ID}</span><br />
            <span>${item.Cost}</span><br />
        </div>
    </script>
         
    // Initialize
    $(".selector").igFunnelChart({
        tooltipTemplate: chartTooltip
    });
             
    // Get
    var template = $(".selector").igFunnelChart("option", "tooltipTemplate");
             
    // Set
    $(".selector").igFunnelChart("option", "tooltipTemplate", chartTooltip);
    	  
  • transitionDuration

    Type:
    number
    Default:
    0

    Gets or sets how long the animations should take to run.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        transitionDuration : 1
    });
     
    // Get
    var thickness = $(".selector").igFunnelChart("option", "transitionDuration");
    
    // Set
    $(".selector").igFunnelChart("option", "transitionDuration", 1);        
  • unselectedSliceStyle

    Type:
    object
    Default:
    null

    Gets or sets the style to use for unselected slices.
    That can be used to set stroke (outline color), fill (background color) and opacity.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        unselectedSliceStyle: {
            fill: "lightblue",
            stroke: "black"
        }
    });
     
    // Get
    var style = $(".selector").igFunnelChart("option", "unselectedSliceStyle");
    
    // Set
    $(".selector").igFunnelChart("option", "unselectedSliceStyle", { fill: "lightblue", stroke: "black" });       
  • useBezierCurve

    Type:
    bool
    Default:
    false

    Gets or sets whether to use a Bezier curve to define the funnel.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        useBezierCurve : true
    });
     
    // Get
    var isBezier = $(".selector").igFunnelChart("option", "useBezierCurve");
    
    // Set
    $(".selector").igFunnelChart("option", "useBezierCurve", true);           
  • useOuterLabelsForLegend

    Type:
    bool
    Default:
    false

    Gets or sets whether to use the outer labels to identify the legend items.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        useOuterLabelsForLegend : true
    });
     
    // Get
    var useLabels = $(".selector").igFunnelChart("option", "useOuterLabelsForLegend");
    
    // Set
    $(".selector").igFunnelChart("option", "useOuterLabelsForLegend", true);          
  • useUnselectedStyle

    Type:
    bool
    Default:
    false

    Gets or sets whether to use the unselected style on unselected slices.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        useUnselectedStyle : true
    });
     
    // Get
    var useUnselected = $(".selector").igFunnelChart("option", "useUnselectedStyle");
    
    // Set
    $(".selector").igFunnelChart("option", "useUnselectedStyle", true);            
  • valueMemberPath

    Type:
    string
    Default:
    null

    Gets or sets the value member path for the funnel chart.

    Code Sample

     
    // Initialize
    $(".selector").igFunnelChart({
        valueMemberPath : "value"
    });
     
    // Get
    var path = $(".selector").igFunnelChart("option", "valueMemberPath");
    
    // Set
    $(".selector").igFunnelChart("option", "valueMemberPath", "value");        
  • width
    Inherited

    Type:
    number
    Default:
    null

    The width of the chart.

    Code Sample

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

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
  • 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", "igfunnelchartdatabinding", function (evt, ui) {
          
        // Get reference to chart widget.
        ui.owner;
          
        // Get reference to instance of $.ig.DataSource.
        ui.dataSource;
    });
      
    // Initialize
    $(".selector").igFunnelChart({
        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", "igfunnelchartdatabound", function (evt, ui) {
          
        // Gets a reference to chart widget.
        ui.owner;
          
        // Gets a reference to array actual data which is displayed by chart.
        ui.data;
         
        // Gets a reference to instance of $.ig.DataSource.
        ui.dataSource;
    });
      
    // Initialize
    $(".selector").igFunnelChart({
        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", "igfunnelcharthidetooltip", function (evt, ui) {
          
        // Gets a reference to chart widget.
        ui.owner;
          
        // Gets a reference to item.
        ui.item;
         
        // Gets a reference to jquery object which represents tooltip or value of ui.element from last updateTooltip event.
        ui.element;
    });
      
    // Initialize
    $(".selector").igFunnelChart({
        hideTooltip: function (evt, ui) {
      
        }
    });
    	  
  • sliceClicked

    Cancellable:
    false

    Event which is raised when a slice is clicked.
    Function takes first argument null and second argument ui.
    Use ui.owner to obtain reference to igFunnelChart.
    Use ui.index to obtain index of clicked slice.
    Use ui.item to obtain reference to clicked slice item.
    Use ui.selected to check if slice became selected.

    Code Sample

     
    //Delegate
    $(document).delegate(".selector", "igfunnelchartsliceclicked", function (evt, ui) {
        // Get reference to igFunnelChart.
        ui.owner;
        
        // Get index of clicked slice.
        ui.index;
        
        // Get reference to clicked data item.
        ui.item;
        
        // Get whether the clicked slice has a selected state.    
        ui.selected;
    });
     
    // Initialize
    $(".selector").igFunnelChart({
        sliceClicked: function(evt, ui) {...}
    });        
  • sliceEnter

    Cancellable:
    false

    Raised when a funnel slice is entered.

  • sliceHover

    Cancellable:
    false

    Raised when a funnel slice is hovered.

  • sliceLeave

    Cancellable:
    false

    Raised when a funnel slice is left.

  • 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", "igfunnelchartupdatetooltip", function (evt, ui) {
          
        // Gets a reference to chart widget.
        ui.owner;
         
        // Gets a reference to html of the tooltip.
        ui.text;
         
        // Gets a reference to the item.
        ui.item;
         
        // Gets the left position of tooltip in pixels relative to widget.
        ui.x;
         
        // Gets the top position of tooltip in pixels relative to widget.
        ui.y;
         
        // Gets a reference to jquery object which represents tooltip.
        ui.element
    });
      
    // Initialize
    $(".selector").igFunnelChart({
        updateTooltip: function (evt, ui) {
      
        }
    });
    	  
  • addItem
    Inherited

    .igFunnelChart( "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

     
    var item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    $(".selector").igFunnelChart("addItem", item1); 
  • chart
    Inherited

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

    Get reference to chart object.

    Code Sample

     
    var chart = $(".selector").igCategoryChart("chart"); 
  • dataBind
    Inherited

    .igFunnelChart( "dataBind" );

    Binds data to the chart.

    Code Sample

     
    $(".selector").igCategoryChart("dataBind"); 
  • destroy

    .igFunnelChart( "destroy" );

    Destroys widget.

    Code Sample

     
    $(".selector").igFunnelChart("destroy"); 
  • exportVisualData

    .igFunnelChart( "exportVisualData" );

    Code Sample

     
    var visualData = $(".selector").igCategoryChart("exportVisualData"); 
  • findIndexOfItem
    Inherited

    .igFunnelChart( "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 item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    var itemIndex = $(".selector").igCategoryChart("findIndexOfItem", item1); 
  • flush
    Inherited

    .igFunnelChart( "flush" );

    Forces any pending deferred work to render on the chart before continuing.

  • getData
    Inherited

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

    Get reference of actual data used by chart.

    Code Sample

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

    .igFunnelChart( "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").igCategoryChart("getDataItem", 0); 
  • insertItem
    Inherited

    .igFunnelChart( "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 item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    $(".selector").igCategoryChart("insertItem", item1, 2); 
  • isSelected

    .igFunnelChart( "isSelected", slice:object );
    Return Type:
    bool
    Return Type Description:
    Returns true if slice is selected.

    Checks if slice is selected.

    • slice
    • Type:object
    • Index of slice or reference to slice-data-item.

    Code Sample

     
    var isSelected = $(".selector").igFunnelChart("isSelected", 1);      
  • notifyClearItems
    Inherited

    .igFunnelChart( "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

     
    $(".selector").igCategoryChart("notifyClearItems", dataSource); 
  • notifyInsertItem
    Inherited

    .igFunnelChart( "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 item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    $(".selector").igCategoryChart("notifyInsertItem", dataSource, 1, item1); 
  • notifyRemoveItem
    Inherited

    .igFunnelChart( "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 item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    $(".selector").igCategoryChart("notifyRemoveItem", dataSource, 1, item1); 
  • notifySetItem
    Inherited

    .igFunnelChart( "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 item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    var item2 = {"Item1": "Value2", "Item2": 500, "Item3": 156.22};
    $(".selector").igCategoryChart("notifySetItem", dataSource, 1, item1, item2); 
  • removeItem
    Inherited

    .igFunnelChart( "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

     
    $(".selector").igCategoryChart("removeItem", 1); 
  • selectedSliceIndexes

    .igFunnelChart( "selectedSliceIndexes", [selection:array] );
    Return Type:
    enumeration
    Return Type Description:
    Can return 'array|object'. If parameter is undefined, then array of selected indexes is returned. Otherwise, it returns reference to igFunnelChart.

    Gets sets array of indexes of selected slices.

    • selection
    • Type:array
    • Optional
    • Array or selected slice indexes.

    Code Sample

     
    // Get
    var selected = $(".selector").igFunnelChart("selectedSliceIndexes"); 
    
    // Set
    $(".selector").igFunnelChart("selectedSliceIndexes", [0, 1, 4]); 
    
  • selectedSliceItems

    .igFunnelChart( "selectedSliceItems", [selection:array] );
    Return Type:
    enumeration
    Return Type Description:
    Can return 'array|object'. If parameter is undefined, then array of selected items is returned. Otherwise, it returns reference to igFunnelChart.

    Gets array of selected slice items.

    • selection
    • Type:array
    • Optional
    • Array or selected slice items.

    Code Sample

     
    // Get
    var selected = $(".selector").igFunnelChart("selectedSliceItems"); 
    
    // Set
    $(".selector").igFunnelChart("selectedSliceItems", [slice1, slice2, slice3]);      
  • setItem
    Inherited

    .igFunnelChart( "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 item1 = {"Item1": "Value1", "Item2": 1000, "Item3": 1019.75};
    $(".selector").igCategoryChart("removeItem", 1, item1); 
  • toggleSelection

    .igFunnelChart( "toggleSelection", slice:object );
    Return Type:
    object
    Return Type Description:
    Returns reference to igFunnelChart.

    Toggles selected state of slice.

    • slice
    • Type:object
    • Index of slice or reference to slice-data-item.

    Code Sample

     
    $(".selector").igFunnelChart("toggleSelection", 1);      
  • ui-funnel ui-corner-all ui-widget-content

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

    Get the class applied to the tooltip element: ui-funnel-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.