Clear Up
SharpKit Reference

Series Class

Series is the abstract class containing the common logic to all chart series. Series includes methods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling mouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.

Listeners

The series class supports listeners via the Observable syntax. Some of these listeners are:

  • itemmouseup When the user interacts with a marker.
  • itemmousedown When the user interacts with a marker.
  • itemmousemove When the user iteracts with a marker.
  • afterrender Will be triggered when the animation ends or when the series has been rendered completely.

For example:

  
series: [{
            type: 'column',
            axis: 'left',
            listeners: {
            'afterrender': function() {
            console('afterrender');
            }
            },
            xField: 'category',
            yField: 'data1'
            }]
            

Namespace: Ext.chart.series

Base Types

Constructors

Methods

Name Description
addEvents(object) Adds the specified events to the list of events which this Observable may fire.
addListener(object, Delegate, object, object) Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
addManagedListener(object, object, Delegate, object, object) Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
clearListeners() Removes all listeners for this object including the managed listeners
clearManagedListeners() Removes all managed listeners for this object.
continueFireEvent(JsString, object, object) Continue to fire event.
createRelayer(object, object) Creates an event handling function which refires the event from this object as the passed event name.
eachRecord(Delegate, object) Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records.
enableBubble(object) Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example:
  Ext.override(Ext.form.field.Base, {
            //  Add functionality to Field's initComponent to enable the change event to bubble
            initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
            this.enableBubble('change');
            }),
            //  We know that we want Field's events to bubble directly to the FormPanel.
            getBubbleTarget : function() {
            if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
            }
            return this.formPanel;
            }
            });
            var myForm = new Ext.formPanel({
            title: 'User Details',
            items: [{
            ...
            }],
            listeners: {
            change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
            }
            }
            });
            
fireEvent(JsString, Object[]) Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
getBubbleParent() Gets the bubbling parent for an Observable
getItemForPoint(JsNumber, JsNumber) For a given x/y point relative to the Surface, find a corresponding item from this series, if any.
getLegendColor(object) Returns a string with the color to be used for the series legend item.
getRecordCount() Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling.
hasListener(JsString) Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer indicates whether the event needs firing or not.
hideAll() Hides all the elements in the series.
highlight(object) Highlight the given series item.
highlightItem(object) Highlight the given series item.
isExcluded(object) Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend.
mon(object, object, Delegate, object, object) Shorthand for addManagedListener. Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
mun(object, object, Delegate, object) Shorthand for removeManagedListener. Removes listeners that were added by the mon method.
on(object, Delegate, object, object) Shorthand for addListener. Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
prepareClass(Delegate) Prepares a given class for observable instances. This method is called when a class derives from this class or uses this class as a mixin.
relayEvents(object, JsArray<T>, object) Relays selected events from the specified Observable as if the events were fired by this. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent:
this.relayEvents(this.getStore(), ['load']);
            
The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the this keyword.
removeListener(JsString, Delegate, object) Removes an event handler.
removeManagedListener(object, object, Delegate, object) Removes listeners that were added by the mon method.
removeManagedListenerItem(bool, object) Remove a single managed listener item
resumeEvents() Resumes firing events (see suspendEvents). If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
setTitle(JsNumber, JsString) Changes the value of the title for the series. Arguments can take two forms:
  • A single String value: this will be used as the new single title for the series (applies to series with only one yField)
  • A numeric index and a String value: this will set the title for a single indexed yField.
  • showAll() Shows all the elements in the series.
    suspendEvents(bool) Suspends the firing of all events. (see resumeEvents)
    un(JsString, Delegate, object) Shorthand for removeListener. Removes an event handler.
    unHighlightItem() Un-highlight any existing highlights

    Properties

    Name Description
    eventsSuspended Initial suspended call count. Incremented when suspendEvents is called, decremented when resumeEvents is called. Defaults to: 0
    hasListeners This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the MVC EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event. The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:
    if (this.hasListeners.foo) {
               this.fireEvent('foo', this, arg1);
               }
                
    isObservable true in this class to identify an object as an instantiated Observable, or subclass thereof. Defaults to: true

    Fields

    Name Description
    label Object with the following properties:
  • display : String

    Specifies the presence and position of labels for each pie slice. Either "rotate", "middle", "insideStart", "insideEnd", "outside", "over", "under", or "none" to prevent label rendering. Default value: 'none'.

  • color : String

    The color of the label text. Default value: '#000' (black).

  • contrast : Boolean

    True to render the label in contrasting color with the backround. Default value: false.

  • field : String

    The name of the field to be displayed in the label. Default value: 'name'.

  • minMargin : Number

    Specifies the minimum distance from a label to the origin of the visualization. This parameter is useful when using PieSeries width variable pie slice lengths. Default value: 50.

  • font : String

    The font used for the labels. Default value: "11px Helvetica, sans-serif".

  • orientation : String

    Either "horizontal" or "vertical". Dafault value: "horizontal".

  • renderer : Function

    Optional function for formatting the label into a displayable value. Default value: function(v) { return v; }

  • listeners An (optional) object with event callbacks. All event callbacks get the target item as first parameter. The callback functions are:
  • itemmouseover
  • itemmouseout
  • itemmousedown
  • itemmouseup
  • Overrides: Ext.util.Observable.listeners
    renderer A function that can be overridden to set custom styling properties to each rendered element. Passes in (sprite, record, attributes, index, store) to the function.
    shadowAttributes An array with shadow attributes Defaults to: null
    showInLegend Whether to show this series in the legend. Defaults to: true
    tips Add tooltips to the visualization's markers. The options for the tips are the same configuration used with Ext.tip.ToolTip. For example:
    tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
                }
                },
                
    title The human-readable name of the series. Defaults to: null
    type The type of series. Set in subclasses. Defaults to: null
    © Copyright 2005-2011 SharpKit. All rights reserved.