|
|
Ext.chart Namespace
Download SDK: SharpKit.ExtJs.zip
Interfaces
|
Callout
|
A mixin providing callout functionality for Ext.chart.series.Series.
|
|
|
Highlight
|
A mixin providing highlight functionality for Ext.chart.series.Series.
|
|
|
Label
|
Labels is a mixin whose methods are appended onto the Series class. Labels is an interface with methods implemented
in each of the Series (Pie, Bar, etc) for label creation and label placement. The methods implemented by the Series are: onCreateLabel(storeItem, item, i, display) Called each time a new label is created.
The arguments of the method are: storeItem The element of the store that is related to the label sprite. item The item related to the label sprite. An item is an object containing the position of the shape
used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc). i The index of the element created (i.e the first created label, second created label, etc) display The display type. May be false if the label is hidden onPlaceLabel(label, storeItem, item, i, display, animate) Called for updating the position of the label.
The arguments of the method are: label The sprite label. storeItem The element of the store that is related to the label sprite item The item related to the label sprite. An item is an object containing the position of the shape
used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc). i The index of the element to be updated (i.e. whether it is the first, second, third from the labelGroup) display The display type. May be false if the label is hidden. animate A boolean value to set or unset animations for the labels.
|
|
|
Mask
|
Defines a mask for a chart's series.
The 'chart' member must be set prior to rendering. A Mask can be used to select a certain region in a chart.
When enabled, the select event will be triggered when a
region is selected by the mask, allowing the user to perform
other tasks like zooming on that region, etc. In order to use the mask one has to set the Chart mask option to
true, vertical or horizontal. Then a possible configuration for the
listener could be: items: {
xtype: 'chart',
animate: true,
store: store1,
mask: 'horizontal',
listeners: {
select: {
fn: function(me, selection) {
me.setZoom(selection);
me.mask.hide();
}
}
},
In this example we zoom the chart to that particular region. You can also get
a handle to a mask instance from the chart object. The chart.mask element is a
Ext.Panel.
|
|
|
Navigation
|
Handles panning and zooming capabilities. Used as mixin by Ext.chart.Chart.
|
|
|
Tip
|
Provides tips for Ext.chart.series.Series.
|
Classes
|
CalloutConfig
|
|
|
|
CalloutEvents
|
|
|
|
Chart
|
The Ext.chart package provides the capability to visualize data.
Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
A chart configuration object has some overall styling options as well as an array of axes
and series. A chart instance example could look like: Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [ ...some axes options... ],
series: [ ...some series options... ]
});
In this example we set the width and height of the chart, we decide whether our series are
animated or not and we select a store to be bound to the chart. We also turn on shadows for all series,
select a color theme Category1 for coloring the series, set the legend to the right part of the chart and
then tell the chart to render itself in the body element of the document. For more information about the axes and
series configurations please check the documentation of each series (Line, Bar, Pie, etc).
|
|
|
ChartConfig
|
|
|
|
ChartEvents
|
|
|
|
HighlightConfig
|
|
|
|
HighlightEvents
|
|
|
|
LabelConfig
|
|
|
|
LabelEvents
|
|
|
|
Legend
|
Defines a legend for a chart's series.
The 'chart' member must be set prior to rendering.
The legend class displays a list of legend items each of them related with a
series being rendered. In order to render the legend item of the proper series
the series configuration object must have showInSeries set to true. The legend configuration object accepts a position as parameter.
The position parameter can be left, right top or bottom. For example: legend: {
position: 'right'
},
Full 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,
animate: true,
store: store,
shadow: true,
theme: 'Category1',
legend: {
position: 'top'
},
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
}
}]
});
|
|
|
LegendConfig
|
|
|
|
LegendEvents
|
|
|
|
LegendItem
|
A single item of a legend (marker plus label)
|
|
|
LegendItemConfig
|
|
|
|
LegendItemEvents
|
|
|
|
MaskConfig
|
|
|
|
MaskEvents
|
|
|
|
NavigationConfig
|
|
|
|
NavigationEvents
|
|
|
|
TipConfig
|
|
|
|
TipEvents
|
|
|
SharpKit.AspNetAjax
Ext