Srirangan

This ver­sion (0.1) of the Dashed­Li­ne­Series com­po­nent is an exten­sion and imple­men­ta­tion of the won­der­ful code posted on Qui­etly Schem­ing by Ely Greens­field. The com­po­nent is an exten­sion of a reg­u­lar Line­Series except that it has a cus­tom Line­Series­Ren­derer that draws a dashed line instead of a straight line.

Screen shot:
 

Code:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:visualization="net.srirangan.visualization.*">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);]]></mx:Script>
<mx:Panel title="Line Chart With Strokes">
     <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true" seriesFilters="{new Array}">
        <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
        </mx:horizontalAxis>
        <mx:series>
           <visualization:DashedLineSeries yField="Profit" displayName="Profit"/>
           <mx:LineSeries yField="Expenses" displayName="Expenses"/>
           <mx:LineSeries yField="Amount" displayName="Amount"/>
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}" direction="horizontal"/>
  </mx:Panel>
</mx:Application> 

What’s next?
– Pre defined mul­ti­ple line pat­terns
– User defined line patterns 

Demo | Source code