X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/chart/series/Radar.js diff --git a/src/chart/series/Radar.js b/src/chart/series/Radar.js index 932253fb..aee62139 100644 --- a/src/chart/series/Radar.js +++ b/src/chart/series/Radar.js @@ -15,25 +15,25 @@ If you are unsure which license is appropriate for your use, please contact the /** * @class Ext.chart.series.Radar * @extends Ext.chart.series.Series - * - * Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for + * + * Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for * a constrained number of categories. - * As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart + * + * As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart * documentation for more information. A typical configuration object for the radar series could be: - * - * {@img Ext.chart.series.Radar/Ext.chart.series.Radar.png Ext.chart.series.Radar chart series} * + * @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} + * { '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, @@ -56,7 +56,7 @@ If you are unsure which license is appropriate for your use, please contact the * showMarkers: true, * markerConfig: { * radius: 5, - * size: 5 + * size: 5 * }, * style: { * 'stroke-width': 2, @@ -90,13 +90,15 @@ If you are unsure which license is appropriate for your use, please contact the * 'stroke-width': 2, * fill: 'none' * } - * }] + * }] * }); - * - * In this configuration we add three series to the chart. Each of these series is bound to the same categories field, `name` but bound to different properties for each category, - * `data1`, `data2` and `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration for the markers of each series can be set by adding properties onto - * the markerConfig object. Finally we override some theme styling properties by adding properties to the `style` object. - * + * + * In this configuration we add three series to the chart. Each of these series is bound to the same + * categories field, `name` but bound to different properties for each category, `data1`, `data2` and + * `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration + * for the markers of each series can be set by adding properties onto the markerConfig object. + * Finally we override some theme styling properties by adding properties to the `style` object. + * * @xtype radar */ Ext.define('Ext.chart.series.Radar', { @@ -112,7 +114,7 @@ Ext.define('Ext.chart.series.Radar', { type: "radar", alias: 'series.radar', - + rad: Math.PI / 180, showInLegend: false, @@ -122,7 +124,7 @@ Ext.define('Ext.chart.series.Radar', { * An object containing styles for overriding series styles from Theming. */ style: {}, - + constructor: function(config) { this.callParent(arguments); var me = this, @@ -138,7 +140,7 @@ Ext.define('Ext.chart.series.Radar', { */ drawSeries: function() { var me = this, - store = me.chart.substore || me.chart.store, + store = me.chart.getChartStore(), group = me.group, sprite, chart = me.chart, @@ -164,18 +166,18 @@ Ext.define('Ext.chart.series.Radar', { first = chart.resizing || !me.radar, axis = chart.axes && chart.axes.get(0), aggregate = !(axis && axis.maximum); - + me.setBBox(); maxValue = aggregate? 0 : (axis.maximum || 0); - + Ext.apply(seriesStyle, me.style || {}); - + //if the store is empty then there's nothing to draw if (!store || !store.getCount()) { return; } - + me.unHighlightItem(); me.cleanHighlights(); @@ -251,7 +253,7 @@ Ext.define('Ext.chart.series.Radar', { me.renderLabels(); me.renderCallouts(); }, - + // @private draws the markers for the lines (if any). drawMarkers: function() { var me = this, @@ -259,15 +261,15 @@ Ext.define('Ext.chart.series.Radar', { surface = chart.surface, markerStyle = Ext.apply({}, me.markerStyle || {}), endMarkerStyle = Ext.apply(markerStyle, me.markerConfig), - items = me.items, + items = me.items, type = endMarkerStyle.type, markerGroup = me.markerGroup, centerX = me.centerX, centerY = me.centerY, item, i, l, marker; - + delete endMarkerStyle.type; - + for (i = 0, l = items.length; i < l; i++) { item = items[i]; marker = markerGroup.getAt(i); @@ -312,7 +314,7 @@ Ext.define('Ext.chart.series.Radar', { } } }, - + isItemInPoint: function(x, y, item) { var point, tolerance = 10, @@ -331,7 +333,7 @@ Ext.define('Ext.chart.series.Radar', { centerY = me.centerY, point = item.point, endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config); - + return me.chart.surface.add(Ext.apply({ 'type': 'text', 'text-anchor': 'middle', @@ -363,14 +365,14 @@ Ext.define('Ext.chart.series.Radar', { hidden: true }, true); - + if (resizing) { label.setAttributes({ x: centerX, y: centerY }, true); } - + if (animate) { label.show(true); me.onAnimate(label, { @@ -382,7 +384,7 @@ Ext.define('Ext.chart.series.Radar', { } }, - // @private for toggling (show/hide) series. + // @private for toggling (show/hide) series. toggleAll: function(show) { var me = this, i, ln, shadow, shadows; @@ -407,18 +409,18 @@ Ext.define('Ext.chart.series.Radar', { } } }, - + // @private hide all elements in the series. hideAll: function() { this.toggleAll(false); this.hideMarkers(0); }, - + // @private show all elements in the series. showAll: function() { this.toggleAll(true); }, - + // @private hide all markers that belong to `markerGroup` hideMarkers: function(index) { var me = this,