Srirangan

This com­po­nent extends the default Leg­end com­po­nent and adds to it few item high­light­ing related fea­tures. It works with all chart types and click­ing on a leg­end item will lead to its vis­i­bil­ity being tog­gled. Fur­ther­more mouse over leg­end item leads to reduc­tion of alphas of other chart series except the related chart series of the leg­end item on which the mouse is over.

Code:

<visualization:AdvancedLegend dataProvider="{lineChart}"/>

Screen­shot:

What’s next?
– Check­boxes based selec­table leg­end items 
– Chart series item style con­trols via legend 

Demo | Source code

This com­po­nent extends the default TitleWin­dow com­po­nent and add two very use­ful fea­tures which make the con­tainer resize able and mov­able. The AdvancedTi­tleWin­dow can be moved using the mouse drag on the title­Bar and it can be resized using the mouse drag on the bot­tom right region.

Code:

<containers:AdvancedTitleWindow width="400" height="300"/>

Screen­shot:
 

What’s next?
– Dock­ing
– Min­i­mize, Max­i­mize options
– Selec­table style patterns

Demo | Source code

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

Another use­ful code sam­ple (orig­i­nally posted on Experts-Exchange.com by yours truly) that allows CheckBox’s to be part of a Data­Grid. This is accom­plished is by set­ting the item­Ren­derer of a Data­Grid­Col­umn to be a Check­Box and han­dling the selected and click prop­er­ties of the CheckBox.

Note: It is impor­tant to set the DataGridColumn’s editable prop­erty to false as the item­Ren­derer itself is the itemEditor.

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="middle">
<mx:DataGrid id="dataGrid" editable="true">
<mx:dataProvider>
<mx:XMLList xmlns="">
<node isTrue="true" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="false" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="true" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="false" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="true" name="xxxxxxxx" location="yyyyyyy"/>
</mx:XMLList>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="@isTrue" width="25" headerText=" " editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{(data.@isTrue == 'true')?true:false}" click="{data.@isTrue = (data.@isTrue != 'true') ? 'true' : 'false';}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="@name" headerText="Name"/>
<mx:DataGridColumn dataField="@location" headerText="Location"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dataProvider="{dataGrid.dataProvider}"/>
</mx:Application>

Here’s a code sam­ple I pro­vided for a ques­tion posted on Experts Exchange. The asker wanted a sta­tic text tooltip for a par­tic­u­lar col­umn in a data grid. The code below uses the dataTip­Func­tion to pro­vide for the same.

Screen­shot
 

Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
public function customDataTip(item:Object):String {
return "custom static data tip";
}
]]>
</mx:Script>
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="@name"/>
<mx:DataGridColumn headerText="Age" dataField="@age"/>
<mx:DataGridColumn headerText="Location" dataField="@location" dataTipFunction="customDataTip" showDataTips="true"/>
</mx:columns>
<mx:dataProvider>
<mx:XMLList xmlns="">
<node name="AAA" age="1" location="New Delhi"/>
<node name="BBB" age="2" location="New Delhi"/>
<node name="CCC" age="3" location="New Delhi"/>
</mx:XMLList>
</mx:dataProvider>
</mx:DataGrid>
</mx:Application>