Posts Tagged ‘MultiChart’

MultiChart Component (Adobe Flex 3)

1 Comment »

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)