Posts Tagged flex_chart

Show various shapes in Flex chart control

For BarChart:

Set itemRenderer property for barSeries

barSeries.setStyle(“itemRenderer”, new ClassFactory(ShapedChartItemRenderer));

————————————————————————————————————-

ShapedChartItemRenderer.as

package
{
    import flash.display.Graphics;
    import mx.charts.series.items.BarSeriesItem;
    import mx.core.IDataRenderer;
    import mx.skins.ProgrammaticSkin;
    import mx.utils.StringUtil;
    
    public class ShapedChartItemRenderer extends ProgrammaticSkin implements IDataRenderer
    {
        private var chartItemShape:String = “”;
        private var chartItemColor:uint = 0x71c0ff;
        private var _chartItem:BarSeriesItem;
        private var shapeFillAlpha:Number = 0.4;
        private var shapeBorderThickness:Number = 2;
        
        public function ShapedChartItemRenderer() {
            // Empty constructor.
        }
        
        public function get data():Object {
            return _chartItem;
        }
        
        public function set data(value:Object):void {
            _chartItem = value as BarSeriesItem;
            invalidateDisplayList();
        }
        
        override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var g:Graphics = graphics;
            g.clear();  
            
            //for drawing oval shape in chart
            g.beginFill(0xff0000,1);
            g.lineStyle(1,0xff0000,1);
            g.drawEllipse(0,0,25,13);

            //uncomment below function for drawing different shapes in chart based on some //condition
            //condition for various shapes and set chartItemShape
            /*chartItemShape = “OVAL”;
            chartItemColor = 0x71c0ff;
            
            if(data)
            {
                drawConditionalShapes(g,chartItemShape,chartItemColor,unscaledWidth,unscaledHeight);
            }*/
            
            g.endFill();
        }
        
        private function drawConditionalShapes(g:Graphics,shape:String,color:uint,uwidth:Number,uheight:Number):void
        {
            switch(StringUtil.trim(shape.toUpperCase()))
            {
                case ChartItemShapes.OVAL_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.drawEllipse(0,0,25,13);
                    break;
                case ChartItemShapes.HEXAGON_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.moveTo(0,0);
                    g.lineTo(20,10);
                    g.lineTo(40,10);
                    g.lineTo(60,0);
                    g.lineTo(40,-10);
                    g.lineTo(20,-10);
                    g.lineTo(0,0);
                    break;
                case ChartItemShapes.GROUPED_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.drawRect(0, 0, uwidth, uheight);
                    break;
                case ChartItemShapes.RECTANGLE_SHAPE:
                    g.beginFill(color,shapeFillAlpha);
                    g.lineStyle(shapeBorderThickness,color,1);
                    g.drawRect(0, 0, 20, 20);
                    break;
                default:
                    g.beginFill(color,1);
                    g.lineStyle(1,color,1);
                    g.drawRect(0, 0, uwidth, uheight);
                break;
            }
        }
    } // Close class.
} // Close package.

 

,

Leave a comment