Flex: Create custom stroke on LineSeries?

Question

You can easily set a stroke on a line series like this:

<mx:LineSeries yField="apple">
    <mx:lineStroke>
        <mx:Stroke 
                    color="0x6699FF" 
                    weight="4" 
                    alpha=".8"
        />
    </mx:lineStroke>
</mx:LineSeries>

This will set alpha for the entire stroke to .8

But I want to be able to set a different alpha on the stoke for each plot based on something in the dataProvider.

For example the yField in the lineSeries is "Apple" which is how it knows where to plot for the lineSeries. I want to be able to add something like alphaField which tells it what to set the stroke alpha for each plot.

so if my dataProvider was:

<result month="Jan-04">
    <apple>81768</apple>
    <alpha>1</alpha>
</result>
<result month="Feb-04">
    <apple>51156</apple>
    <alpha>1</alpha>
</result>
<result month="Mar-04">
    <apple>51156</apple>
    <alpha>.5</alpha>
</result>

And I set alphaField="alpha" then I would have a solid stroke from plot 0 to plot 1 and then a 50% alpha stroke from plot 1 to plot 2.

How can I do this??? I am looking in the commitProperties() and updateDisplayList() methods of LineSeries and have no idea what would need to be added/changed to make this?

I am pretty sure, this class has to use Graphics.lineTo() to draw each plot, so basically it would need to "get" the current alphaField value somehow, and apply a Graphics.lineStyle() with the correct alpha before drawing each line.

Thanks!!

---

UPDATE

I have gotten much closer to my answer.

When I extend LineRenderer I override updateDisplayList() which calls GraphicsUtilities.drawPolyLine()

I extend GraphicsUtilities and override the method drawPolyLine() as this is where the line is actually drawn.

I can call lineStyle() in here and change the alpha of the line...

I still have 1 thing I cannot figure out, from within the drawPolyLine() method how can I access that data that dictates what the alpha should be?

Thanks!!!!

Answer 1

I used Flex SDK 4.0, but I believe it'll work on 3.4 as well.

Used ArrayCollection instead of XML, because it wasn't the tsimus.

<mx:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" >

    <fx:Script><![CDATA[
        import mx.charts.ChartItem;
        import mx.charts.renderers.CircleItemRenderer;
        import mx.collections.ArrayCollection;
        import mx.graphics.IFill;
        import mx.graphics.SolidColor;
        import mx.graphics.Stroke;

        import st.model.ViewModelLocator;

        [Bindable]
        private var modelLocator:st.model.ViewModelLocator = ViewModelLocator.getInstance() ;

        [Bindable]
        public var dp :ArrayCollection = new ArrayCollection([
            { test:0.1,alpha: 1 },
            { test:0.2,alpha: 0.5 },
            { test:0.3,alpha: 0.75 },
            { test:0.4,alpha: 0.25 },
            { test:0.5,alpha: 0.5 }
        ]);

        private function myFillFunction(element:ChartItem, index:Number):IFill {
            return new SolidColor(0x6699FF,Number(element.item.alpha));
        }
    ]]></fx:Script>

    <mx:ColumnChart id="myChart" dataProvider="{dp}">
        <mx:series>
            <mx:LineSeries lineStroke="{new Stroke(0x6699FF,4,0.1)}" width="100" height="100" yField="test" fillFunction="{myFillFunction}" itemRenderer="{new ClassFactory(mx.charts.renderers.CircleItemRenderer)}" />
        </mx:series>
    </mx:ColumnChart>

</mx:Application>

Answer 2

Have you tried using a custom item renderer?

<mx:LineSeries>
  <mx:itemRenderer>
    <mx:Component>
      <mx:BoxItemRenderer scaleX="1" scaleY="1" alpha="{data.alpha}"/>
    </mx:Component>
  </mx:itemRenderer>
</mx:LineSeries>

This is just a quick example, but I think the itemRenderer is the way to go.

Answer 3

In drawPolyLine function you will get pts:Array. this is an array of the specific SeriesItem. For Line series you will get an array of LineSeriesItem objects. So if you want to get your x&y axis values. you just access the 'xValue' or 'yValue' property of a LineSeriesItem. like this: pts[0].xValue or pts[0].yValue

public static function drawPolyLine(g:Graphics, pts:Array,
                                     start:int, end:int,
                                     hProp:String, vProp:String,
                                     stroke:IStroke, form:Object,
                                     moveToStart:Boolean = true):void