Clear Up
SharpKit Reference

Numeric Class

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.

Namespace: Ext.chart.axis

Derived Types

Constructors

Properties

Name Description
adjustMaximumByMajorUnit Indicates whether to extend maximum beyond data's maximum to the nearest majorUnit. Defaults to: false
adjustMinimumByMajorUnit Indicates whether to extend the minimum beyond data's minimum to the nearest majorUnit. Defaults to: false
decimals The number of decimals to round the value to. Defaults to: 2
maximum The maximum value drawn by the axis. If not set explicitly, the axis maximum will be calculated automatically.
minimum The minimum value drawn by the axis. If not set explicitly, the axis minimum will be calculated automatically.

Fields

Name Description
constrain If true, the values of the chart will be rendered only if they belong between minimum and maximum If false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not Default's true if maximum and minimum is specified. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.