What should the LineChart do in this situation?
How can you draw a line with only 1 data point much less extrapolate the data??

Turns out that the Flex chart does not handle that very well. The solution?? Write your own lineSegmentRenderer.

Here is an example of a lineSegementRenderer that will just draw a circle for this case.

MyLineRenderer.as:

package
{
    import mx.charts.renderers.LineRenderer;
    import mx.charts.series.items.LineSeriesItem;   
    import mx.charts.series.renderData.LineSeriesRenderData;
    import mx.charts.series.items.LineSeriesSegment;   
    import mx.charts.renderers.CircleItemRenderer
    import flash.display.Graphics;
    import flash.geom.Rectangle;
    import mx.charts.ChartItem;
    import mx.charts.chartClasses.GraphicsUtilities;
    import mx.core.IDataRenderer;
    import mx.graphics.IFill;
    import mx.graphics.IStroke

    public class MyLineRenderer extends LineRenderer
    {
        private static var rcFill:Rectangle = new Rectangle();     
       
        public function MyLineRenderer()
        {
            super();
        }
       
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
        {
            var l:int=(data as LineSeriesSegment).items.length;
            if(l==1){          
                var item:LineSeriesItem=((data as LineSeriesSegment).items[0] as LineSeriesItem)
                var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle("fill"));
                var stroke:IStroke = getStyle("stroke");
                       
                var w:Number = stroke ? stroke.weight / 2 : 0;
       
                rcFill.right = 2;
                rcFill.bottom = 2;
       
                var g:Graphics = graphics;
                g.clear();     
                if (stroke)
                    stroke.apply(g);
                if (fill)
                    fill.begin(g, rcFill);
                g.drawCircle(item.x, item.y, 3);
                if (fill)
                    fill.end(g);
            }
            else{
                super.updateDisplayList(unscaledWidth, unscaledHeight);        
            }   
        }      
    }
}
 

Read the rest of this post»


4 Comments »

September 3rd, 2007 by Kyle
Tags: , , , , , , , ,
Posted in: Flex

I had a customer asking how he could make the lines in a LineSeries have a sensitivity to mouse proximity similar to the datapoints.
Here is what I came up with:

The essence of the solution was to extend the LineRenderer and draw an additional line with alpha=0, but of specified width, to the graphics object that the visible line is drawn on. That way mouse events will be dispatched by this line.

I figured the most logical place to specify the lineSensitivity attribute would be on the “Stroke” object, so I added that property to an extension of the Stroke class that I then access in my custom LineRenderer.

Here is the Stroke extension:

package
{
    import mx.graphics.Stroke;

    public class MyStroke extends Stroke
    {
        public function MyStroke(color:uint=0.0, weight:Number=0.0, alpha:Number=1.0, pixelHinting:Boolean=false, scaleMode:String="normal", caps:String=null, joints:String=null, miterLimit:Number=0.0)
        {
            super(color, weight, alpha, pixelHinting, scaleMode, caps, joints, miterLimit);
        }
       
        private var _lineSensitivity:Number=50;
   
        [Inspectable(category="General")]
   
        public function get lineSensitivity():Number
        {
            return _lineSensitivity;
        }
       
        /**
         *  @private
         */

        public function set lineSensitivity(value:Number):void
        {
            _lineSensitivity = value;
        }      
       
    }
}
 

Read the rest of this post»


No Comments »