Touch Charts 1.0.1 Sencha Docs

Ext.chart.series.Pie

Hierarchy

Ext.chart.series.Series
Ext.chart.series.Pie

Files

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:

Ext.chart.series.Pie chart series

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.

Defined By

Config options

Ext.chart.series.Pie
view source
: String
The store record field name to be used for the pie angles. ...

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

Ext.chart.series.Pie
view source
: Array

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.

Ext.chart.series.Pie
view source
: Boolean|Number
Whether to set the pie chart as donut chart. ...

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

Ext.chart.series.Pie
view source
: Boolean
Extra distance value for which the labelOverflow listener is triggered. ...

Extra distance value for which the labelOverflow listener is triggered. Default to 20.

Defaults to: 20

Ext.chart.series.Pie
view source
: String
The store record field name to be used for the pie slice lengths. ...

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. ...

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.

Ext.chart.series.Pie
view source
: Number
The angle in degrees at which the first pie slice should start. ...

The angle in degrees at which the first pie slice should start. Defaults to 0.

Defaults to: 0

An array with shadow attributes

An array with shadow attributes

Ext.chart.series.Pie
view source
: Boolean
Whether to add the pie chart elements as legend items. ...

Whether to add the pie chart elements as legend items. Default's false.

Defaults to: false

Overrides: Ext.chart.series.Series.showInLegend

Ext.chart.series.Pie
view source
: Object

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. ...

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');
  }
},

The human-readable name of the series.

The human-readable name of the series.

Defined By

Properties

Ext.chart.series.Pie
view source
: Objectprivate
Ext.chart.series.Pie
view source
: Objectprotected
{String} type The type of series. ...

{String} type The type of series. Set in subclasses.

Defaults to: 'pie'

Overrides: Ext.chart.series.Series.type

Defined By

Methods

Ext.chart.series.Pie
view source
( item )private
utility function to calculate the middle point of a pie slice. ...

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. ...

Split any series items that were combined via combine into their original items.

Combine two of this series's indexed items into one. ...

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

Ext.chart.series.Pie
view source
( )
Draws the series for the current chart. ...

Draws the series for the current chart.

Fires

  • beforedraw
  • draw

Overrides: Ext.chart.series.Series.drawSeries

Ext.chart.series.Pie
view source
( fn, scope )
Iterate over each of the displayed records for this pie series, taking into account records that have been combined i...

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

Ext.chart.series.Pie
view source
( angle )private
...

Parameters

  • angle : Object

Fires

    For a given x/y point relative to the Surface, find a corresponding item from this series, if any. ...

    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>
      

    Fires

      Ext.chart.series.Pie
      view source
      ( item )
      Returns the color of the series (to be displayed as color for the series legend item). ...

      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

      Fires

        Overrides: Ext.chart.series.Series.getLegendColor

        Ext.chart.series.Pie
        view source
        ( )
        Returns an array of labels to be displayed as items in the legend. ...

        Returns an array of labels to be displayed as items in the legend. Only relevant if showInLegend is true.

        Fires

          Overrides: Ext.chart.series.Series.getLegendLabels

          get the surface for drawing the series overlay sprites ...

          get the surface for drawing the series overlay sprites

          Ext.chart.series.Pie
          view source
          ( )
          Return the number of records being displayed in this series. ...

          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

          Ext.chart.series.Pie
          view source
          ( opt )private
          returns an object with properties for a PieSlice. ...

          returns an object with properties for a PieSlice.

          Parameters

          • opt : Object
          get the surface for drawing the series sprites ...

          get the surface for drawing the series sprites

          Ext.chart.series.Pie
          view source
          ( )private
          hides all elements in the series. ...

          hides all elements in the series.

          Fires

          • beforedraw
          • draw

          Overrides: Ext.chart.series.Series.hideAll

          Ext.chart.series.Pie
          view source
          ( item )
          Highlight the specified item. ...

          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

          Ext.chart.series.Pie
          view source
          ( angle, item )private
          ...

          Parameters

          • angle : Object
          • item : Object
          Determines whether the item at the given index is the result of item combination. ...

          Determines whether the item at the given index is the result of item combination.

          Parameters

          • index : Number

          Returns

          • Boolean

          Fires

            Determines whether the series item at the given index has been excluded, i.e. ...

            Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend.

            Parameters

            • index : Object
            Ext.chart.series.Pie
            view source
            ( x, y, item )private
            ...

            Parameters

            • x : Object
            • y : Object
            • item : Object
            Ext.chart.series.Pie
            view source
            ( sprite, attr )private
            handles sprite animation for the series. ...

            handles sprite animation for the series.

            Parameters

            • sprite : Object
            • attr : Object
            Ext.chart.series.Pie
            view source
            ( )private
            ...
            Ext.chart.series.Pie
            view source
            ( storeItem, item )private
            callback for when creating a label sprite. ...

            callback for when creating a label sprite.

            Parameters

            • storeItem : Object
            • item : Object

            Fires

              Ext.chart.series.Pie
              view source
              ( label )private
              default configuration for label overflowing the pie slice shape. ...

              default configuration for label overflowing the pie slice shape.

              Parameters

              • label : Object
              Ext.chart.series.Pie
              view source
              ( callout, storeItem, item )private
              callback for when placing a callout sprite. ...

              callback for when placing a callout sprite.

              Parameters

              • callout : Object
              • storeItem : Object
              • item : Object

              Fires

                Ext.chart.series.Pie
                view source
                ( label, storeItem, item, i, display, animate, index )private
                callback for when placing a label sprite. ...

                callback for when placing a label sprite.

                Parameters

                • label : Object
                • storeItem : Object
                • item : Object
                • i : Object
                • display : Object
                • animate : Object
                • index : Object

                Fires

                • labelOverflow
                Ext.chart.series.Pie
                view source
                ( )
                Reset the series to its original state, before any user interaction. ...

                Reset the series to its original state, before any user interaction.

                Fires

                  Overrides: Ext.chart.series.Series.reset

                  Changes the value of the title for the series. ...

                  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

                  Fires

                  Ext.chart.series.Pie
                  view source
                  ( )private
                  shows all elements in the series. ...

                  shows all elements in the series.

                  Fires

                  • beforedraw
                  • draw

                  Overrides: Ext.chart.series.Series.showAll

                  Ext.chart.series.Pie
                  view source
                  ( slice, label )private
                  ...

                  Parameters

                  • slice : Object
                  • label : Object
                  Ext.chart.series.Pie
                  view source
                  ( item )
                  un-highlights the specified item. ...

                  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

                  Ext.chart.series.Pie
                  view source
                  ( )private
                  update the position/size of the series surface. ...

                  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.

                  Fires

                    Overrides: Ext.chart.series.Series.updateSurfaceBox

                    Checks whether the data field should be visible in the legend ...

                    Checks whether the data field should be visible in the legend

                    Parameters

                    • index : Number

                      The index of the current item

                    Fires

                      Defined By

                      Events

                      Fires when the series title is changed via setTitle. ...

                      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