Ext JS 4.0.7 Sencha Docs

Ext.chart.axis.Numeric

Alternate names

Ext.chart.NumericAxis

Hierarchy

Subclasses

Files

An axis to handle numeric values. This axis is used for quantitative data as opposed to the category axis. You can set mininum and maximum values to the axis so that the values are bound to that. If no values are set, then the scale will auto-adjust to the values.

var store = Ext.create('Ext.data.JsonStore', {
     fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
     data: [
         {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
         {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
         {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
         {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
         {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
     ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    store: store,
    axes: [{
        type: 'Numeric',
        grid: true,
        position: 'left',
        fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
        title: 'Sample Values',
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 1
            }
        },
        minimum: 0,
        adjustMinimumByMajorUnit: 0
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
        title: 'Sample Metrics',
        grid: true,
        label: {
            rotate: {
                degrees: 315
            }
        }
    }],
    series: [{
        type: 'area',
        highlight: false,
        axis: 'left',
        xField: 'name',
        yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
        style: {
            opacity: 0.93
        }
    }]
});

In this example we create an axis of Numeric type. We set a minimum value so that even if all series have values greater than zero, the grid starts at zero. We bind the axis onto the left part of the surface by setting position to left. We bind three different store fields to this axis by setting fields to an array. We set the title of the axis to Number of Hits by using the title property. We use a grid configuration to set odd background rows to a certain style and even rows to be transparent/ignored.

Available since: 3.4.0

Defined By

Config options

The size of the dash marker. ...

The size of the dash marker. Default's 3.

Defaults to: 3

Available since: 4.0.0

The grid configuration enables you to set a background grid for an axis. ...

The grid configuration enables you to set a background grid for an axis. If set to true on a vertical axis, vertical lines will be drawn. If set to true on a horizontal axis, horizontal lines will be drawn. If both are set, a proper grid with horizontal and vertical lines will be drawn.

You can set specific options for the grid configuration for odd and/or even lines/rows. Since the rows being drawn are rectangle sprites, you can set to an odd or even property all styles that apply to Ext.draw.Sprite. For more information on all the style properties you can set please take a look at Ext.draw.Sprite. Some useful style properties are opacity, fill, stroke, stroke-width, etc.

The possible values for a grid option are then true, false, or an object with { odd, even } properties where each property contains a sprite style descriptor object that is defined in Ext.draw.Sprite.

For example:

axes: [{
    type: 'Numeric',
    grid: true,
    position: 'left',
    fields: ['data1', 'data2', 'data3'],
    title: 'Number of Hits',
    grid: {
        odd: {
            opacity: 1,
            fill: '#ddd',
            stroke: '#bbb',
            'stroke-width': 1
        }
    }
}, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Month of the Year',
    grid: true
}]

Available since: 4.0.2

Offset axis position. ...

Offset axis position. Default's 0.

Defaults to: 0

Available since: 4.0.0

If minimum and maximum are specified it forces the number of major ticks to the specified value.

If minimum and maximum are specified it forces the number of major ticks to the specified value.

Available since: 4.0.0

The number of small ticks between two major ticks. ...

The number of small ticks between two major ticks. Default is zero.

Available since: 4.0.0

Where to set the axis. ...

Where to set the axis. Available options are left, bottom, right, top. Default's bottom.

Defaults to: 'bottom'

Available since: 4.0.0

The title for the Axis

The title for the Axis

Available since: 4.0.4

Offset axis width. ...

Offset axis width. Default's 0.

Defaults to: 0

Available since: 4.0.0

Defined By

Properties

Indicates whether to extend maximum beyond data's maximum to the nearest majorUnit. ...

Indicates whether to extend maximum beyond data's maximum to the nearest majorUnit.

Defaults to: false

Available since: 3.4.0

Indicates whether to extend the minimum beyond data's minimum to the nearest majorUnit. ...

Indicates whether to extend the minimum beyond data's minimum to the nearest majorUnit.

Defaults to: false

Available since: 3.4.0

Available since: 4.0.2

Available since: 4.0.0

Ext.chart.axis.Numeric
view source
: Number
The number of decimals to round the value to. ...

The number of decimals to round the value to.

Defaults to: 2

Available since: 4.0.0

force min/max values from store ...

force min/max values from store

Defaults to: false

Available since: 4.0.1

...

Defaults to: false

Available since: 4.0.2

...

Defaults to: false

Available since: 4.0.0

...

Defaults to: 0

Available since: 4.0.2

Ext.chart.axis.Numeric
view source
: Number
The maximum value drawn by the axis. ...

The maximum value drawn by the axis. If not set explicitly, the axis maximum will be calculated automatically.

Available since: 3.4.0

...

Defaults to: 0

Available since: 4.0.2

Ext.chart.axis.Numeric
view source
: Number
The minimum value drawn by the axis. ...

The minimum value drawn by the axis. If not set explicitly, the axis minimum will be calculated automatically.

Available since: 3.4.0

Ext.chart.axis.Numeric
view source
: String
Indicates the position of the axis relative to the chart ...

Indicates the position of the axis relative to the chart

Defaults to: 'left'

Available since: 3.4.0

Ext.chart.axis.Numeric
view source
: Stringprivate
The scaling algorithm to use on this axis. ...

The scaling algorithm to use on this axis. May be "linear" or "logarithmic". Currently only linear scale is implemented.

Defaults to: "linear"

Available since: 3.4.0

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); / dependent on 'this'

        return this;
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

...

Defaults to: false

Available since: 4.0.0

...

Defaults to: 10

Available since: 4.0.2

Ext.chart.axis.Numeric
view source
: Stringprivate
End Definitions ...

End Definitions

Defaults to: 'numeric'

Available since: 3.4.0

...

Defaults to: 0

Available since: 4.0.2

...

Defaults to: 0

Available since: 4.0.2

Methods

Defined By

Instance methods

Ext.chart.axis.Numeric
view source
new( config ) : Ext.chart.axis.Numeric
Creates new Axis. ...

Creates new Axis.

Available since: 3.4.0

Parameters

Returns

Fires

    Overrides: Ext.chart.axis.Abstract.constructor, Ext.chart.axis.Numeric.constructor

    ...

    Available since: 4.0.2

    ...

    Available since: 4.0.6

    Parameters

    Returns

    Ext.chart.axis.Numeric
    view source
    ( )private
    apply data. ...

    apply data.

    Available since: 4.0.0

    Fires

      Overrides: Ext.chart.axis.Axis.applyData

      creates a structure with start, end and step points. ...

      creates a structure with start, end and step points.

      Available since: 4.0.0

      Fires

        Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

        Call the original method that was previously overridden with override

        Ext.define('My.Cat', {
            constructor: function() {
                alert("I'm a cat!");
        
                return this;
            }
        });
        
        My.Cat.override({
            constructor: function() {
                alert("I'm going to be a cat!");
        
                var instance = this.callOverridden();
        
                alert("Meeeeoooowwww");
        
                return instance;
            }
        });
        
        var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                  // alerts "I'm a cat!"
                                  // alerts "Meeeeoooowwww"
        

        Available since: 4.0.0

        Parameters

        • args : Array/Arguments

          The arguments, either an array or the arguments object

        Returns

        • Object

          Returns the result after calling the overridden method

        Call the parent's overridden method. ...

        Call the parent's overridden method. For example:

        Ext.define('My.own.A', {
            constructor: function(test) {
                alert(test);
            }
        });
        
        Ext.define('My.own.B', {
            extend: 'My.own.A',
        
            constructor: function(test) {
                alert(test);
        
                this.callParent([test + 1]);
            }
        });
        
        Ext.define('My.own.C', {
            extend: 'My.own.B',
        
            constructor: function() {
                alert("Going to call parent's overriden constructor...");
        
                this.callParent(arguments);
            }
        });
        
        var a = new My.own.A(1); // alerts '1'
        var b = new My.own.B(1); // alerts '1', then alerts '2'
        var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
                                 // alerts '2', then alerts '3'
        

        Available since: 4.0.0

        Parameters

        • args : Array/Arguments

          The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

        Returns

        • Object

          Returns the result from the superclass' method

        Renders the axis into the screen and updates its position. ...

        Renders the axis into the screen and updates its position.

        Available since: 4.0.0

        Parameters

        Fires

          Overrides: Ext.chart.axis.Abstract.drawAxis

          Renders an horizontal and/or vertical grid into the Surface. ...

          Renders an horizontal and/or vertical grid into the Surface.

          Available since: 4.0.0

          ...

          Available since: 4.0.0

          Fires

            Renders the labels in the axes. ...

            Renders the labels in the axes.

            Available since: 4.0.0

            Fires

              ( maxWidth, maxHeight )private
              draws the title for the axis. ...

              draws the title for the axis.

              Available since: 4.0.0

              Parameters

              ...

              Available since: 4.0.0

              Fires

                ( sprite, text, desiredWidth, minWidth, center )private
                creates the elipsis for the text. ...

                creates the elipsis for the text.

                Available since: 4.0.0

                Parameters

                ...

                Available since: 4.0.2

                ...

                Available since: 4.0.0

                Parameters

                ...

                Available since: Ext JS 4.0.7

                ( config ) : Objectchainableprotected
                Initialize configuration for this class. ...

                Initialize configuration for this class. a typical example:

                Ext.define('My.awesome.Class', {
                    // The default config
                    config: {
                        name: 'Awesome',
                        isAwesome: true
                    },
                
                    constructor: function(config) {
                        this.initConfig(config);
                
                        return this;
                    }
                });
                
                var awesome = new My.awesome.Class({
                    name: 'Super Awesome'
                });
                
                alert(awesome.getName()); // 'Super Awesome'
                

                Available since: 4.0.0

                Parameters

                Returns

                • Object

                  mixins The mixin prototypes as key - value pairs

                Fires

                  ...

                  Available since: 4.0.0

                  Parameters

                  Fires

                    ( name, cls )private
                    Used internally by the mixins pre-processor ...

                    Used internally by the mixins pre-processor

                    Available since: 4.0.6

                    Parameters

                    Fires

                      ( name, value )private
                      ...

                      Available since: 4.0.6

                      Parameters

                      Fires

                        ( name, fn )private
                        ...

                        Available since: 4.0.0

                        Parameters

                        Called to process a view i.e to make aggregation and filtering over a store creating a substore to be used to render ...

                        Called to process a view i.e to make aggregation and filtering over a store creating a substore to be used to render the axis. Since many axes may do different things on the data and we want the final result of all these operations to be rendered we need to call processView on all axes before drawing them.

                        Available since: 4.0.2

                        ...

                        Available since: 4.0.0

                        Parameters

                        Ext.chart.axis.Numeric
                        view source
                        ( v, dec )private
                        ...

                        Available since: 4.0.0

                        Parameters

                        ( config ) : Ext.Basechainableprivate
                        ...

                        Available since: 4.0.0

                        Parameters

                        Returns

                        Fires

                          Updates the title of this axis. ...

                          Updates the title of this axis.

                          Available since: 4.0.0

                          Parameters

                          Fires

                            Get the reference to the class from which this object was instantiated. ...

                            Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

                            Ext.define('My.Cat', {
                                statics: {
                                    totalCreated: 0,
                                    speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                                },
                            
                                constructor: function() {
                                    var statics = this.statics();
                            
                                    alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                                    // equivalent to: My.Cat.speciesName
                            
                                    alert(this.self.speciesName);   // dependent on 'this'
                            
                                    statics.totalCreated++;
                            
                                    return this;
                                },
                            
                                clone: function() {
                                    var cloned = new this.self;                      // dependent on 'this'
                            
                                    cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
                            
                                    return cloned;
                                }
                            });
                            
                            
                            Ext.define('My.SnowLeopard', {
                                extend: 'My.Cat',
                            
                                statics: {
                                    speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                                },
                            
                                constructor: function() {
                                    this.callParent();
                                }
                            });
                            
                            var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
                            
                            var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
                            
                            var clone = snowLeopard.clone();
                            alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
                            alert(clone.groupName);                 // alerts 'Cat'
                            
                            alert(My.Cat.totalCreated);             // alerts 3
                            

                            Available since: 4.0.0

                            Returns

                            Defined By

                            Static methods

                            ( members ) : Ext.Basechainablestatic
                            Add / override static properties of this class. ...

                            Add / override static properties of this class.

                            Ext.define('My.cool.Class', {
                                ...
                            });
                            
                            My.cool.Class.addStatics({
                                someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                                method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                                method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
                            });
                            

                            Available since: 4.0.2

                            Parameters

                            Returns

                            ( fromClass, members ) : Ext.Basechainablestatic
                            Borrow another class' members to the prototype of this class. ...

                            Borrow another class' members to the prototype of this class.

                            Ext.define('Bank', {
                                money: '$$$',
                                printMoney: function() {
                                    alert('$$$$$$$');
                                }
                            });
                            
                            Ext.define('Thief', {
                                ...
                            });
                            
                            Thief.borrow(Bank, ['money', 'printMoney']);
                            
                            var steve = new Thief();
                            
                            alert(steve.money); // alerts '$$$'
                            steve.printMoney(); // alerts '$$$$$$$'
                            

                            Available since: 4.0.2

                            Parameters

                            • fromClass : Ext.Base

                              The class to borrow members from

                            • members : String/String[]

                              The names of the members to borrow

                            Returns

                            Create a new instance of this Class. ...

                            Create a new instance of this Class.

                            Ext.define('My.cool.Class', {
                                ...
                            });
                            
                            My.cool.Class.create({
                                someConfig: true
                            });
                            

                            All parameters are passed to the constructor of the class.

                            Available since: 4.0.2

                            Returns

                            ( alias, origin )static
                            Create aliases for existing prototype methods. ...

                            Create aliases for existing prototype methods. Example:

                            Ext.define('My.cool.Class', {
                                method1: function() { ... },
                                method2: function() { ... }
                            });
                            
                            var test = new My.cool.Class();
                            
                            My.cool.Class.createAlias({
                                method3: 'method1',
                                method4: 'method2'
                            });
                            
                            test.method3(); // test.method1()
                            
                            My.cool.Class.createAlias('method5', 'method3');
                            
                            test.method5(); // test.method3() -> test.method1()
                            

                            Available since: 4.0.2

                            Parameters

                            Get the current class' name in string format. ...

                            Get the current class' name in string format.

                            Ext.define('My.cool.Class', {
                                constructor: function() {
                                    alert(this.self.getName()); // alerts 'My.cool.Class'
                                }
                            });
                            
                            My.cool.Class.getName(); // 'My.cool.Class'
                            

                            Available since: 4.0.4

                            Returns

                            Add methods / properties to the prototype of this class. ...

                            Add methods / properties to the prototype of this class.

                            Ext.define('My.awesome.Cat', {
                                constructor: function() {
                                    ...
                                }
                            });
                            
                             My.awesome.Cat.implement({
                                 meow: function() {
                                    alert('Meowww...');
                                 }
                             });
                            
                             var kitty = new My.awesome.Cat;
                             kitty.meow();
                            

                            Available since: 4.0.2

                            Parameters

                            ( members ) : Ext.Basechainablestatic
                            Override prototype members of this class. ...

                            Override prototype members of this class. Overridden methods can be invoked via callOverridden

                            Ext.define('My.Cat', {
                                constructor: function() {
                                    alert("I'm a cat!");
                            
                                    return this;
                                }
                            });
                            
                            My.Cat.override({
                                constructor: function() {
                                    alert("I'm going to be a cat!");
                            
                                    var instance = this.callOverridden();
                            
                                    alert("Meeeeoooowwww");
                            
                                    return instance;
                                }
                            });
                            
                            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                                      // alerts "I'm a cat!"
                                                      // alerts "Meeeeoooowwww"
                            

                            Available since: 4.0.2

                            Parameters

                            Returns