Clear Up
SharpKit Reference

Ext.chart.axis Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Abstract

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Base class for all axis classes.

AbstractConfig
AbstractEvents
Axis

Defines axis for charts. The axis position, type, style can be configured. The axes are defined in an axes array of configuration objects where the type, field, grid and other configuration options can be set. To know more about how to create a Chart please check the Chart class documentation. Here's an example for the axes part: An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:

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

In this case we use a Numeric axis for displaying the values of the Area series and a Category axis for displaying the names of the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart. Both the category and numeric axes have grid set, which means that horizontal and vertical lines will cover the chart background. In the category axis the labels will be rotated so they can fit the space better.

AxisConfig
AxisEvents
Category

A type of axis that displays items in categories. This axis is generally used to display categorical information like names of items, month names, quarters, etc. but no quantitative values. For that other type of information Number axis are more suitable.

As with other axis you can set the position of the axis and its title. For example:

  
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',
            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 with set the category axis to the bottom of the surface, bound the axis to the name property and set as title Month of the Year.

CategoryConfig
CategoryEvents
Gauge

Gauge Axis is the axis to be used with a Gauge series. The Gauge axis displays numeric data from an interval defined by the minimum, maximum and step configuration properties. The placement of the numeric data can be changed by altering the margin option that is set to 10 by default.

A possible configuration for this axis would look like:

  
axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 7
            }],
            
GaugeConfig
GaugeEvents
Numeric

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.

NumericConfig
NumericEvents
Radial

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

RadialConfig
RadialEvents
Time

A type of axis whose units are measured in time values. Use this axis for listing dates that you will want to group or dynamically change. If you just want to display dates as categories then use the Category class for axis instead.

For example:

  
axes: [{
            type: 'Time',
            position: 'bottom',
            fields: 'date',
            title: 'Day',
            dateFormat: 'M d',
            constrain: true,
            fromDate: new Date('1/1/11'),
            toDate: new Date('1/7/11')
            }]
            

In this example we're creating a time axis that has as title Day. The field the axis is bound to is date. The date format to use to display the text for the axis labels is M d which is a three letter month abbreviation followed by the day number. The time axis will show values for dates between fromDate and toDate. Since constrain is set to true all other values for other dates not between the fromDate and toDate will not be displayed.

TimeConfig
TimeEvents
© Copyright 2005-2011 SharpKit. All rights reserved.