Ext.chart.series.Pie
Hierarchy
Ext.chart.series.SeriesExt.chart.series.PieFiles
Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different categories that also have a meaning as a whole. As with all other series, the Pie Series must be appended in the series Chart array configuration. See the Chart documentation for more information. A typical configuration object for the pie series could be:
var store = new 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}
]
});
new Ext.chart.Chart({
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
In this configuration we set pie as the type for the series, set an object with specific style properties for highlighting options
(triggered when hovering elements). We also set true to showInLegend so all the pie slices can be represented by a legend item.
We set data1 as the value of the field to determine the angle span for each pie slice. We also set a label configuration object
where we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.
We set contrast to true to flip the color of the label if it is to similar to the background color. Finally, we set the font family
and size through the font parameter.
Config options
The store record field name to be used for the pie angles. The values bound to this field name must be positive real numbers. This parameter is required.
Defaults to: false
An array of color values which will be used, in order, as the pie slice fill colors.
An array of color values which will be used, in order, as the pie slice fill colors.
Whether to set the pie chart as donut chart. Default's false. Can be set to a particular percentage to set the radius of the donut chart.
Defaults to: false
Extra distance value for which the labelOverflow listener is triggered. Default to 20.
Defaults to: 20
The store record field name to be used for the pie slice lengths. The values bound to this field name must be positive real numbers. This parameter is optional.
Defaults to: false
A function that can be overridden to set custom styling properties to each rendered element. Passes in (sprite, record, attributes, index, store) to the function.
The angle in degrees at which the first pie slice should start. Defaults to 0.
Defaults to: 0
Whether to add the pie chart elements as legend items. Default's false.
Defaults to: false
Overrides: Ext.chart.series.Series.showInLegend
An object containing styles for overriding series styles from Theming.
An object containing styles for overriding series styles from Theming.
Add tooltips to the visualization's markers. The options for the tips are the same configuration used with Ext.tip.ToolTip. For example:
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
Properties
{String} type The type of series. Set in subclasses.
Defaults to: 'pie'
Overrides: Ext.chart.series.Series.type
Methods
utility function to calculate the middle point of a pie slice.
Parameters
- item : Object
Split any series items that were combined via combine into their original items.
Combine two of this series's indexed items into one. This is done via drag-drop on the legend for series that render more than one legend item. The data store is not modified, but the series uses the cumulative list of combinations in its rendering.
Parameters
- index1 : Number
Index of the first item
- index2 : Number
Index of the second item
Draws the series for the current chart.
Overrides: Ext.chart.series.Series.drawSeries
Iterate over each of the displayed records for this pie series, taking into account records that have been combined into one by the user.
Parameters
- fn : Function
The function to execute for each record.
- scope : Object
Scope for the fn.
Overrides: Ext.chart.series.Series.eachRecord
For a given x/y point relative to the Surface, find a corresponding item from this series, if any.
Parameters
- x : Number
- y : Number
Returns
- Object
An object describing the item, or null if there is no matching item. The exact contents of
this object will vary by series type, but should always contain at least the following: <ul> <li>{Ext.chart.series.Series} series - the Series object to which the item belongs</li> <li>{Object} value - the value(s) of the item's data point</li> <li>{Array} point - the x/y coordinates relative to the chart box of a single point for this data item, which can be used as e.g. a tooltip anchor point.</li> <li>{Ext.draw.Sprite} sprite - the item's rendering Sprite. </ul>
Returns the color of the series (to be displayed as color for the series legend item).
Parameters
- item : Object
{Object} Info about the item; same format as returned by getItemForPoint
Overrides: Ext.chart.series.Series.getLegendColor
Returns an array of labels to be displayed as items in the legend. Only relevant if showInLegend is true.
Overrides: Ext.chart.series.Series.getLegendLabels
get the surface for drawing the series overlay sprites
Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling.
Overrides: Ext.chart.series.Series.getRecordCount
returns an object with properties for a PieSlice.
Parameters
- opt : Object
get the surface for drawing the series sprites
hides all elements in the series.
Hides all the elements in the series.
Overrides: Ext.chart.series.Series.hideAll
Highlight the specified item. If no item is provided the whole series will be highlighted.
Parameters
- item : Object
{Object} Info about the item; same format as returned by getItemForPoint
Determines whether the item at the given index is the result of item combination.
Parameters
- index : Number
Returns
- Boolean
Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend.
Parameters
- index : Object
handles sprite animation for the series.
Parameters
- sprite : Object
- attr : Object
callback for when creating a label sprite.
Parameters
- storeItem : Object
- item : Object
default configuration for label overflowing the pie slice shape.
Parameters
- label : Object
callback for when placing a callout sprite.
Parameters
- callout : Object
- storeItem : Object
- item : Object
callback for when placing a label sprite.
Parameters
- label : Object
- storeItem : Object
- item : Object
- i : Object
- display : Object
- animate : Object
- index : Object
Reset the series to its original state, before any user interaction.
Overrides: Ext.chart.series.Series.reset
Changes the value of the title for the series. Arguments can take two forms:
- A single String value: this will be used as the new single title for the series (applies to series with only one yField)
- A numeric index and a String value: this will set the title for a single indexed yField.
Parameters
- index : Number
- title : String
shows all elements in the series.
Shows all the elements in the series.
Overrides: Ext.chart.series.Series.showAll
un-highlights the specified item. If no item is provided it will un-highlight the entire series.
Parameters
- item : Object
{Object} Info about the item; same format as returned by getItemForPoint
update the position/size of the series surface. For pie series we set it to the full chart size so it doesn't get clipped when slices slide out.
Overrides: Ext.chart.series.Series.updateSurfaceBox
Checks whether the data field should be visible in the legend
Parameters
- index : Number
The index of the current item
Events
Fires when the series title is changed via setTitle.
Parameters
- title : String
The new title value
- index : Number
The index in the collection of titles