Ignite UI API Reference

ui.igBaseChart

ui.igBaseChart_image
This is the base widget for igSparkline, igFunnelChart, and igDoughnutChart. It contains options, methods, events, and CSS classes implemented by the derived widgets. It must be inherited and when using igBaseChart example code, you should replace igBaseChart with the actual chart widget used.

Code Sample

 
    // See specific members for more details or see derived widgets: igSparkline, 
    // igFunnelChart, or igDoughnutChart for implementation overview.

Dependencies

Inherits

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

    Code Sample

     
//Initialize
$(".selector").igBaseChart({
    dataSource : data
});
 
//Get
var data = $(".selector").igBaseChart("option", "dataSource");

//Set
$(".selector").igBaseChart("option", "dataSource", data);

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

    Code Sample

     
//Initialize
$(".selector").igBaseChart({
    dataSourceType : "json"
});
 
//Get
var type = $(".selector").igBaseChart("option", "dataSourceType");

//Set
$(".selector").igBaseChart("option", "dataSourceType", "json");

  • dataSourceUrl

    Type:
    string
    Default:
    null

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

    Code Sample

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

//Set
$(".selector").igBaseChart("option", "http://myhost/data");

  • height

    Type:
    number
    Default:
    null

    The height of the chart.

    Code Sample

     
//Initialize
$(".selector").igBaseChart({
    height : 500
});
 
//Get
var height = $(".selector").igBaseChart("option", "height");
 
//Set
$(".selector").igBaseChart("option", "height", 500);

  • maxRecCount

    Type:
    number
    Default:
    null

    Gets sets maximum number of displayed records in chart.

    Code Sample

     
//Initialize
$(".selector").igBaseChart({
    maxRecCount : 100
});
 
//Get
var count = $(".selector").igBaseChart("option", "maxRecCount");
 
//Set
$(".selector").igBaseChart("option", "maxRecCount", 100);

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

    Code Sample

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

  • responseTotalRecCountKey

    Type:
    string
    Default:
    null

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

    Code Sample

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

  • tooltipTemplate

    Type:
    string
    Default:
    null

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

    Code Sample

     
//Initialize
$(".selector").igBaseChart({
    tooltipTemplate : "High: ${High}"
});
 
//Get
var template = $(".selector").igBaseChart("option", "tooltipTemplate");
 
//Set
$(".selector").igBaseChart("option", "tooltipTemplate", "High: ${High}");

  • width

    Type:
    number
    Default:
    null

    The width of the chart.

    Code Sample

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

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

    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", "igbasechartdatabinding", function (evt, ui) {
    // Get reference to igBaseChart.
    ui.owner;
    
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
 
//Initialize
$(".selector").igBaseChart({
    dataBinding: function(evt, ui) {...}
});

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

    Code Sample

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

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

    Code Sample

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

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

    Code Sample

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

  • addItem

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

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

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

    Code Sample

     
$(".selector").igBaseChart("addItem", dataItem);

  • chart

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

    Get reference to chart object.

    Code Sample

     
// Not intended for use with derived widget       
var chart = $(".selector").igBaseChart("chart");

  • dataBind

    .igBaseChart( "dataBind" );

    Code Sample

     
$(".selector").igBaseChart("dataBind");

  • destroy

    .igBaseChart( "destroy" );

    Destroys widget.

    Code Sample

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

  • findIndexOfItem

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

    Find index of item within actual data used by chart.

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

    Code Sample

     
var index = $(".selector").igBaseChart("findIndexOfItem", item);

  • getData

    .igBaseChart( "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").igBaseChart("getData");

  • getDataItem

    .igBaseChart( "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").igBaseChart("getDataItem", 0);

  • insertItem

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("insertItem", item, 9);

  • notifyClearItems

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("notifyClearItems", dataSource);

  • notifyInsertItem

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("notifyInsertItem", dataSource, 9, newItem);

  • notifyRemoveItem

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("notifyRemoveItem", dataSource, 0, oldItem);

  • notifySetItem

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("notifySetItem", dataSource, 0, newItem, oldItem);

  • removeItem

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("removeItem", 0);

  • setItem

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

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

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

    Code Sample

     
var chart = $(".selector").igBaseChart("setItem", 0, item);

  • ui-widget-content ui-corner-all

    Get the class applied to the tooltip element.

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

#