Srirangan

Releas­ing a sim­ple, pow­er­ful and exten­si­ble Map com­po­nent devel­oped using Action­Script and Flex 3. The idea is that a map con­tains one or more poly­gons rep­re­sent­ing each sub-region. Each poly­gon can have mouse events attached to it and can have fur­ther prop­er­ties set. This con­cept is fur­ther extended in my sec­ond map com­po­nent i.e. the Choro­pleth Map that will be released later this week so stay tuned!

Demo | Source code

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 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

Worked on a chart­ing com­po­nent for Adobe Flex 3. The idea behind the com­po­nent is to cre­ate one sin­gle object, spec­ify a sin­gle dat­aProvider and have 6 dif­fer­ent charts gen­er­ated. Sim­ple, rou­tine stuff.

<visualizations:MultiChart id="multiChart" width="640" height="480"
backgroundColor="#ffffff" title="Default chart title" legendHeight="40"/>

[Bindable]
public var dataArrayCollection:ArrayCollection = new ArrayCollection;
public function creationCompleteHandler():void {
dataArrayCollection.addItem(new ArrayCollection([{"x":115, "y":120, "z":125, label: "Series1.1"},{"x":215, "y":220, "z":225, label: "Series1.2"},{"x":215, "y":220, "z":225, label: "Series1.3"}]));
dataArrayCollection.addItem(new ArrayCollection([{"x":415, "y":420, "z":425, label: "Series2.1"},{"x":15, "y":520, "z":525, label: "Series2.2"},{"x":615, "y":620, "z":625, label: "Series2.3"}]));
dataArrayCollection.addItem(new ArrayCollection([{"x":75, "y":75, "z":75, label: "Series3.1"},{"x":45, "y":50, "z":235, label: "Series3.2"},{"x":324, "y":654, "z":345, label: "Series3.3"}]));
multiChart.dataProvider = dataArrayCollection;
multiChart.refresh();
}

A few screens..

This is the first release so there isn’t any real doc­u­men­ta­tion avail­able, but there is a demo, an exam­ple and the source code. It should really be self explana­tory at this stage. One thing, the object needs to be refreshed [refresh()] after chang­ing the dat­aProvider. It has been left like this on purpose.

What’s next?
– Smart leg­ends
– Timer based chart switcher
– Expos­ing more chart, axis, leg­end, panel styles to the user
– Themes.. etc.

Demo | Source Code (Zip 22kb)