|
|
Ext.chart.axis Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
Abstract
|
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',
grid: true,
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',
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 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. 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',
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
|
|
|
|
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',
groupBy: 'year,month,day',
aggregateOp: 'sum',
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
|
|
|
SharpKit.AspNetAjax
Ext