X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Radar.html diff --git a/docs/source/Radar.html b/docs/source/Radar.html new file mode 100644 index 00000000..aa44371d --- /dev/null +++ b/docs/source/Radar.html @@ -0,0 +1,419 @@ +Sencha Documentation Project
/**
+ * @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 
+ * 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 
+ * 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}  
+ *
+ *     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,
+ *         theme:'Category2',
+ *         store: store,
+ *         axes: [{
+ *             type: 'Radial',
+ *             position: 'radial',
+ *             label: {
+ *                 display: true
+ *             }
+ *         }],
+ *         series: [{
+ *             type: 'radar',
+ *             xField: 'name',
+ *             yField: 'data3',
+ *             showInLegend: true,
+ *             showMarkers: true,
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5           
+ *             },
+ *             style: {
+ *                 'stroke-width': 2,
+ *                 fill: 'none'
+ *             }
+ *         },{
+ *             type: 'radar',
+ *             xField: 'name',
+ *             yField: 'data2',
+ *             showMarkers: true,
+ *             showInLegend: true,
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             style: {
+ *                 'stroke-width': 2,
+ *                 fill: 'none'
+ *             }
+ *         },{
+ *             type: 'radar',
+ *             xField: 'name',
+ *             yField: 'data5',
+ *             showMarkers: true,
+ *             showInLegend: true,
+ *             markerConfig: {
+ *                 radius: 5,
+ *                 size: 5
+ *             },
+ *             style: {
+ *                 '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.
+ * 
+ * @xtype radar
+ */
+Ext.define('Ext.chart.series.Radar', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.chart.series.Series',
+
+    requires: ['Ext.chart.Shape', 'Ext.fx.Anim'],
+
+    /* End Definitions */
+
+    type: "radar",
+    alias: 'series.radar',
+
+    
+    rad: Math.PI / 180,
+
+    showInLegend: false,
+
+    /**
+     * @cfg {Object} style
+     * An object containing styles for overriding series styles from Theming.
+     */
+    style: {},
+    
+    constructor: function(config) {
+        this.callParent(arguments);
+        var me = this,
+            surface = me.chart.surface, i, l;
+        me.group = surface.getGroup(me.seriesId);
+        if (me.showMarkers) {
+            me.markerGroup = surface.getGroup(me.seriesId + '-markers');
+        }
+    },
+
+    /**
+     * Draws the series for the current chart.
+     */
+    drawSeries: function() {
+        var me = this,
+            store = me.chart.substore || me.chart.store,
+            group = me.group,
+            sprite,
+            chart = me.chart,
+            animate = chart.animate,
+            field = me.field || me.yField,
+            surface = chart.surface,
+            chartBBox = chart.chartBBox,
+            rendererAttributes,
+            centerX, centerY,
+            items,
+            radius,
+            maxValue = 0,
+            fields = [],
+            max = Math.max,
+            cos = Math.cos,
+            sin = Math.sin,
+            pi2 = Math.PI * 2,
+            l = store.getCount(),
+            startPath, path, x, y, rho,
+            i, nfields,
+            seriesStyle = me.seriesStyle,
+            seriesLabelStyle = me.seriesLabelStyle,
+            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();
+
+        centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
+        centerY = me.centerY = chartBBox.y + (chartBBox.height / 2);
+        me.radius = radius = Math.min(chartBBox.width, chartBBox.height) /2;
+        me.items = items = [];
+
+        if (aggregate) {
+            //get all renderer fields
+            chart.series.each(function(series) {
+                fields.push(series.yField);
+            });
+            //get maxValue to interpolate
+            store.each(function(record, i) {
+                for (i = 0, nfields = fields.length; i < nfields; i++) {
+                    maxValue = max(+record.get(fields[i]), maxValue);
+                }
+            });
+        }
+        //ensure non-zero value.
+        maxValue = maxValue || 1;
+        //create path and items
+        startPath = []; path = [];
+        store.each(function(record, i) {
+            rho = radius * record.get(field) / maxValue;
+            x = rho * cos(i / l * pi2);
+            y = rho * sin(i / l * pi2);
+            if (i == 0) {
+                path.push('M', x + centerX, y + centerY);
+                startPath.push('M', 0.01 * x + centerX, 0.01 * y + centerY);
+            } else {
+                path.push('L', x + centerX, y + centerY);
+                startPath.push('L', 0.01 * x + centerX, 0.01 * y + centerY);
+            }
+            items.push({
+                sprite: false, //TODO(nico): add markers
+                point: [centerX + x, centerY + y],
+                series: me
+            });
+        });
+        path.push('Z');
+        //create path sprite
+        if (!me.radar) {
+            me.radar = surface.add(Ext.apply({
+                type: 'path',
+                group: group,
+                path: startPath
+            }, seriesStyle || {}));
+        }
+        //reset on resizing
+        if (chart.resizing) {
+            me.radar.setAttributes({
+                path: startPath
+            }, true);
+        }
+        //render/animate
+        if (chart.animate) {
+            me.onAnimate(me.radar, {
+                to: Ext.apply({
+                    path: path
+                }, seriesStyle || {})
+            });
+        } else {
+            me.radar.setAttributes(Ext.apply({
+                path: path
+            }, seriesStyle || {}), true);
+        }
+        //render markers, labels and callouts
+        if (me.showMarkers) {
+            me.drawMarkers();
+        }
+        me.renderLabels();
+        me.renderCallouts();
+    },
+    
+    // @private draws the markers for the lines (if any).
+    drawMarkers: function() {
+        var me = this,
+            chart = me.chart,
+            surface = chart.surface,
+            markerStyle = Ext.apply({}, me.markerStyle || {}),
+            endMarkerStyle = Ext.apply(markerStyle, me.markerConfig),
+            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);
+            if (!marker) {
+                marker = Ext.chart.Shape[type](surface, Ext.apply({
+                    group: markerGroup,
+                    x: 0,
+                    y: 0,
+                    translate: {
+                        x: centerX,
+                        y: centerY
+                    }
+                }, endMarkerStyle));
+            }
+            else {
+                marker.show();
+            }
+            if (chart.resizing) {
+                marker.setAttributes({
+                    x: 0,
+                    y: 0,
+                    translate: {
+                        x: centerX,
+                        y: centerY
+                    }
+                }, true);
+            }
+            marker._to = {
+                translate: {
+                    x: item.point[0],
+                    y: item.point[1]
+                }
+            };
+            //render/animate
+            if (chart.animate) {
+                me.onAnimate(marker, {
+                    to: marker._to
+                });
+            }
+            else {
+                marker.setAttributes(Ext.apply(marker._to, endMarkerStyle || {}), true);
+            }
+        }
+    },
+    
+    isItemInPoint: function(x, y, item) {
+        var point,
+            tolerance = 10,
+            abs = Math.abs;
+        point = item.point;
+        return (abs(point[0] - x) <= tolerance &&
+                abs(point[1] - y) <= tolerance);
+    },
+
+    // @private callback for when creating a label sprite.
+    onCreateLabel: function(storeItem, item, i, display) {
+        var me = this,
+            group = me.labelsGroup,
+            config = me.label,
+            centerX = me.centerX,
+            centerY = me.centerY,
+            point = item.point,
+            endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config);
+        
+        return me.chart.surface.add(Ext.apply({
+            'type': 'text',
+            'text-anchor': 'middle',
+            'group': group,
+            'x': centerX,
+            'y': centerY
+        }, config || {}));
+    },
+
+    // @private callback for when placing a label sprite.
+    onPlaceLabel: function(label, storeItem, item, i, display, animate) {
+        var me = this,
+            chart = me.chart,
+            resizing = chart.resizing,
+            config = me.label,
+            format = config.renderer,
+            field = config.field,
+            centerX = me.centerX,
+            centerY = me.centerY,
+            opt = {
+                x: item.point[0],
+                y: item.point[1]
+            },
+            x = opt.x - centerX,
+            y = opt.y - centerY;
+
+        label.setAttributes({
+            text: format(storeItem.get(field)),
+            hidden: true
+        },
+        true);
+        
+        if (resizing) {
+            label.setAttributes({
+                x: centerX,
+                y: centerY
+            }, true);
+        }
+        
+        if (animate) {
+            label.show(true);
+            me.onAnimate(label, {
+                to: opt
+            });
+        } else {
+            label.setAttributes(opt, true);
+            label.show(true);
+        }
+    },
+
+    // @private for toggling (show/hide) series. 
+    toggleAll: function(show) {
+        var me = this,
+            i, ln, shadow, shadows;
+        if (!show) {
+            Ext.chart.series.Radar.superclass.hideAll.call(me);
+        }
+        else {
+            Ext.chart.series.Radar.superclass.showAll.call(me);
+        }
+        if (me.radar) {
+            me.radar.setAttributes({
+                hidden: !show
+            }, true);
+            //hide shadows too
+            if (me.radar.shadows) {
+                for (i = 0, shadows = me.radar.shadows, ln = shadows.length; i < ln; i++) {
+                    shadow = shadows[i];
+                    shadow.setAttributes({
+                        hidden: !show
+                    }, true);
+                }
+            }
+        }
+    },
+    
+    // @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,
+            count = me.markerGroup && me.markerGroup.getCount() || 0,
+            i = index || 0;
+        for (; i < count; i++) {
+            me.markerGroup.getAt(i).hide(true);
+        }
+    }
+});
+
+
\ No newline at end of file