/** * @class Ext.chart.AbstractChart * @extend Ext.draw.Container * * The Ext.chart package provides the capability to visualize data. * Each chart binds directly to a {@link Ext.data.Store 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 this: * * Ext.create('Ext.chart.CartesianChart', { * width: 800, * height: 600, * animation: { * easing: 'backOut', * duration: 500 * }, * store: store1, * legend: { * position: 'right' * }, * axes: [ * // ...some axes options... * ], * series: [ * // ...some series options... * ] * }); * * In this example we set the `width` and `height` of a chart; We decide whether our series are * animated or not and we select a store to be bound to the chart; We also set the legend to the right part of the * chart. * * You can register certain interactions such as {@link Ext.chart.interactions.PanZoom} on the chart by specify an * array of names or more specific config objects. All the events will be wired automatically. * * You can also listen to series `itemXXX` events on both chart and series level. * * For example: * * Ext.create('Ext.chart.CartesianChart', { * plugins: { * ptype: 'chartitemevents', * moveEvents: true * }, * store: { * fields: ['pet', 'households', 'total'], * data: [ * {pet: 'Cats', households: 38, total: 93}, * {pet: 'Dogs', households: 45, total: 79}, * {pet: 'Fish', households: 13, total: 171} * ] * }, * axes: [{ * type: 'numeric', * position: 'left' * }, { * type: 'category', * position: 'bottom' * }], * series: [{ * type: 'bar', * xField: 'pet', * yField: 'households', * listeners: { * itemmousemove: function (series, item, event) { * console.log('itemmousemove', item.category, item.field); * } * } * }, { * type: 'line', * xField: 'pet', * yField: 'total', * marker: true * }], * listeners: { // Listen to itemclick events on all series. * itemclick: function (chart, item, event) { * console.log('itemclick', item.category, item.field); * } * } * }); * * For more information about the axes and series configurations please check the documentation of * each series (Line, Bar, Pie, etc). * */ /** * @event beforerefresh * Fires before a refresh to the chart data is called. If the `beforerefresh` handler returns * `false` the {@link #refresh} action will be canceled. * @param {Ext.chart.AbstractChart} this */ /** * @event refresh * Fires after the chart data has been refreshed. * @param {Ext.chart.AbstractChart} this */ /** * @event redraw * Fires after each {@link #redraw} call. * @param {Ext.chart.AbstractChart} this */ /** * @private * @event layout * Fires after the final layout is done. * (Two layouts may be required to fully render a chart. * Typically for the initial render and every time thickness * of the chart's axes changes.) * @param {Ext.chart.AbstractChart} this */ /** * @event itemhighlight * Fires when a new chart item is highlighted or dehighlighted. * The `newHighlightItem` and `oldHighlightItem` objects will have the same type as * the object returned by the {@link #getItemForPoint} method. * @param {Ext.chart.AbstractChart} chart * @param {Object} newHighlightItem * @param {Object} oldHighlightItem */ /** * @event itemmousemove * Fires when the mouse is moved on a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemmouseup * Fires when a mouseup event occurs on a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemmousedown * Fires when a mousedown event occurs on a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemmouseover * Fires when the mouse enters a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemmouseout * Fires when the mouse exits a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemclick * Fires when a click event occurs on a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemdblclick * Fires when a double click event occurs on a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event itemtap * Fires when a tap event occurs on a series item. * *Note*: This event requires the {@link Ext.chart.plugin.ItemEvents chartitemevents} * plugin be added to the chart. * @param {Ext.chart.AbstractChart} chart * @param {Object} item * @param {Event} event */ /** * @event storechange * Fires when the store of the chart changes. * @param {Ext.chart.AbstractChart} chart * @param {Ext.data.Store} newStore * @param {Ext.data.Store} oldStore */ /** * @cfg {Ext.data.Store/String/Object} [store='ext-empty-store'] * The data source to which the chart is bound. Acceptable values for this property are: * * - **any {@link Ext.data.Store Store} class / subclass** * - **an {@link Ext.data.Store#storeId ID of a store}** * - **a {@link Ext.data.Store Store} config object**. When passing a config you can * specify the store type by alias. Passing a config object with a store type will * dynamically create a new store of that type when the chart is instantiated. * * For example: * * Ext.define('MyApp.store.Customer', { * extend: 'Ext.data.Store', * alias: 'store.customerstore', * * fields: ['name', 'value'] * }); * * * Ext.create({ * xtype: 'cartesian', * renderTo: document.body, * height: 400, * width: 400, * store: { * type: 'customerstore', * data: [{ * name: 'metric one', * value: 10 * }] * }, * axes: [{ * type: 'numeric', * position: 'left', * title: { * text: 'Sample Values', * fontSize: 15 * }, * fields: 'value' * }, { * type: 'category', * position: 'bottom', * title: { * text: 'Sample Values', * fontSize: 15 * }, * fields: 'name' * }], * series: { * type: 'bar', * xField: 'name', * yField: 'value' * } * }); * * @accessor */ /** * @cfg {String} [theme="default"] * The name of the theme to be used. A theme defines the colors and styles * used by the series, axes, markers and other chart components. * Please see the documentation for the {@link Ext.chart.theme.Base} class for more information. * Possible theme values are: * - 'green', 'sky', 'red', 'purple', 'blue', 'yellow' * - 'category1' to 'category6' * - and the above theme names with the '-gradients' suffix, e.g. 'green-gradients' * * IMPORTANT: You should require the themes you use; for example, to use: * * theme: 'blue' * * the `Ext.chart.theme.Blue` class should be required: * * requires: 'Ext.chart.theme.Blue' * * To require all chart themes: * * requires: 'Ext.chart.theme.*' * * @accessor */ /** * @cfg {Object} style * The style for the chart component. * @accessor */ /** * @cfg {Boolean/Object} animation (optional) * `true` for the default animation (easing: 'ease' and duration: 500) * or a standard animation config object to be used for default chart animations. * @accessor */ /** * @cfg {Ext.chart.series.Series/Array} [series=[]] * Array of {@link Ext.chart.series.Series Series} instances or config objects. For example: * * series: [{ * type: 'column', * axis: 'left', * listeners: { * 'afterrender': function() { * console.log('afterrender'); * } * }, * xField: 'category', * yField: 'data1' * }] * * @accessor */ /** * @cfg {Ext.chart.axis.Axis/Array/Object} [axes=[]] * Array of {@link Ext.chart.axis.Axis Axis} instances or config objects. For example: * * axes: [{ * type: 'numeric', * position: 'left', * title: 'Number of Hits', * minimum: 0 * }, { * type: 'category', * position: 'bottom', * title: 'Month of the Year' * }] * * @accessor */ /** * @cfg {Ext.chart.legend.Legend/Ext.chart.legend.SpriteLegend/Boolean} [legend=null] * The legend config for the chart. If specified, a legend block will be shown * next to the chart. * Each legend item displays the {@link Ext.chart.series.Series#title title} * of the series, the color of the series and allows to toggle the visibility * of the series (at least one series should remain visible). * * Sencha Charts support two types of legends: DOM based and sprite based. * * The sprite based legend can be shown in chart {@link Ext.draw.Container#preview preview} * and is a part of the downloaded {@link Ext.draw.Container#download chart image}. * The sprite based legend is always displayed in full and takes as much space as necessary, * the legend items are split into columns to use the available space efficiently. * The sprite based legend is styled via a {@link Ext.chart.theme.Base chart theme}. * * The DOM based legend supports RTL. * It occupies a fixed width or height and scrolls when the content overflows. * The DOM based legend is styled via CSS rules. * * By default the DOM legend is used. The type can be explicitly specified: * * legend: { * type: 'sprite', // 'dom' is another possible value * docked: 'top' * } * * If the legend config is set to `true`, the DOM legend will be used * docked to the bottom. * * @accessor */ /** * @cfg {Array} [colors=null] * Array of colors/gradients to override the color of items and legends. * * @accessor */ /** * @cfg {Object|Number|String} insetPadding * The amount of inset padding in pixels for the chart. * Inset padding is the padding from the boundary of the chart to any of its contents. * * @accessor */ /** * @cfg {Object} [background=null] * Set the chart background. * This can be a gradient object, image, or color. * * For example, if `background` were to be a color we could set the object as * * background: '#ccc' * * You can specify an image by using: * * background: { * type: 'image', * src: 'http://path.to.image/' * } * * Also you can specify a gradient by using the gradient object syntax: * * background: { * type: 'linear', * degrees: 0, * stops: [ * { * offset: 0, * color: 'white' * }, * { * offset: 1, * color: 'blue' * } * ] * } * * @accessor */ /** * @cfg {Array} [interactions=[]] * Interactions are optional modules that can be plugged in to a chart * to allow the user to interact with the chart and its data in special ways. * The `interactions` config takes an Array of Object configurations, * each one corresponding to a particular interaction class identified * by a `type` property: * * new Ext.chart.AbstractChart({ * renderTo: Ext.getBody(), * width: 800, * height: 600, * store: store1, * axes: [ * // ...some axes options... * ], * series: [ * // ...some series options... * ], * interactions: [{ * type: 'interactiontype' * // ...additional configs for the interaction... * }] * }); * * When adding an interaction which uses only its default configuration * (no extra properties other than `type`), you can alternately specify * only the type as a String rather than the full Object: * * interactions: ['reset', 'rotate'] * * The current supported interaction types include: * * - {@link Ext.chart.interactions.PanZoom panzoom} - allows pan and zoom of axes * - {@link Ext.chart.interactions.ItemHighlight itemhighlight} - allows highlighting of series data points * - {@link Ext.chart.interactions.ItemInfo iteminfo} - allows displaying details of a data point in a popup panel * - {@link Ext.chart.interactions.Rotate rotate} - allows rotation of pie and radar series * * See the documentation for each of those interaction classes to see how they can be configured. * * Additional custom interactions can be registered using `'interactions.'` alias prefix. * @accessor */ /** * @cfg {Object} [highlightItem=null] * The current highlight item in the chart. * The object must be the one that you get from item events. * * Note that series can also own highlight items. * This notion is separate from this one and should not be used at the same time. * * @accessor */