Gantt Charts in Flex

Creat a New mxml file:
ganttChart.mxml

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml ” layout=”absolute” creationComplete=”onCreationComplete()”> <mx:Script> <![CDATA[ import SimpleGanttUtil; [Bindable] private var ganttData : XML = <GanttData> <series duration=”20″> <task duration=”2″ start=”0″ title=”Task 1″ /> <task duration=”2″ start=”1″ title=”Task 2″ /> <task duration=”7″ start=”3″ title=”Task 3″ /> <task duration=”5″ start=”8″ title=”Task 4″ /> <task duration=”6″ start=”8″ title=”Task 5″ /> <task duration=”4″ start=”14″ title=”Task 6″ /> <task duration=”3″ start=”17″ title=”Task 7″ /> </series> </GanttData>; public function onCreationComplete() : void { SimpleGanttUtil.duration = ganttData.series.@duration ; dg.dataProvider = ganttData.series.task; } ]]> </mx:Script> <mx:DataGrid top=”0″ left=”0″ right=”0″ bottom=”0″ id=”dg” > <mx:columns> <mx:DataGridColumn headerText=”Title” dataField=”@title” width=”80″/> <mx:DataGridColumn headerText=”Duration” dataField=”@start” itemRenderer=”SimpleGanttRenderer”/> </mx:columns> </mx:DataGrid> </mx:Application> SimpleGanttUtil.as package { public class SimpleGanttUtil { public static var duration : Number = 0; } } SimpleGanttRenderer.as package { import mx.core.UIComponent; import mx.core.IDataRenderer; import flash.display.Graphics; import mx.controls.listClasses.IListItemRenderer; import mx.utils.GraphicsUtil; import flash.geom.Rectangle; import SimpleGanttUtil; import flash.events.Event; import mx.events.FlexEvent; import mx.controls.listClasses.BaseListData; import mx.controls.dataGridClasses.DataGridListData; [Event(name=”dataChange”, type=”mx.events.FlexEvent”)] public class SimpleGanttRenderer extends UIComponent implements IDataRenderer, IListItemRenderer { private var _data : Object = null; [Bindable(”dataChange”)] public function get data():Object { return _data; } public function set data(value:Object):void { this._data = value; this.invalidateProperties(); dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); } override protected function updateDisplayList(w:Number, h:Number):void { super.updateDisplayList(w, h); var g:Graphics = graphics; g.clear(); if ( _data != null) { g.lineStyle(1, 0×000000, 1); g.beginFill(0×443356, .5); var r:Rectangle = calculateRectangle(w,h); GraphicsUtil.drawRoundRectComplex(g, r.x, r.y, r.width, r.height, 0, 0, 0, 0); g.endFill(); } } private function calculateRectangle(w:Number, h:Number) : Rectangle { var xmlData : XML = XML(_data); var rect_x : int = 1+ ((w-2) * ( xmlData.@start/SimpleGanttUtil.duration )); var rect_y : int = 1; var rect_width : int = (w-0.2) * ( xmlData.@duration/SimpleGanttUtil.duration ); var rect_height : int = h-2; return new Rectangle( rect_x, rect_y, rect_width, rect_height ); } } }

Bubble charts in flex

Creat a New mxml file:
bubbleChart.mxml

<?xml version=”1.0″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml “> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month: “Jan”, Profit: 2000, Expenses: 120, Amount: 45}, {Month: “Feb”, Profit: 1000, Expenses: 200, Amount: 60}, {Month: “Mar”, Profit: 1500, Expenses: 500, Amount: 30}]); ]]> </mx:Script> <mx:Panel title=”Bubble Chart”> <mx:BubbleChart maxRadius=”50″ dataProvider=”{expenses}” showDataTips=”true”> <mx:series> <mx:BubbleSeries xField=”Profit” yField=”Expenses” radiusField=”Amount”/> </mx:series> </mx:BubbleChart> </mx:Panel> </mx:Application>

Candle Stick Chart in Flex

Creat a New mxml file:

candleStickChart.mxml

<?xml version=”1.0″ encoding=”iso-8859-1″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml “> <mx:Script> <![CDATA[ [Bindable] public var aapl:Array = [ {date: “1-Aug-05″, open: 42.57, high: 43.08, low: 42.08, close: 42.75}, {date: “2-Aug-05″, open: 42.89, high: 43.5, low: 42.61, close: 43.19}, {date: “3-Aug-05″, open: 43.19, high: 43.31, low: 42.77, close: 43.22}, {date: “4-Aug-05″, open: 42.89, high: 43, low: 42.29, close: 42.71}, {date: “5-Aug-05″, open: 42.49, high: 43.36, low: 42.02, close: 42.99}, {date: “8-Aug-05″, open: 43, high: 43.25, low: 42.61, close: 42.65}, {date: “9-Aug-05″, open: 21.93, high: 21.89, low: 11.91, close: 43.82}, {date: “10-Aug-05″, open: 44, high: 44.39, low: 43.31, close: 43.38}, {date: “11-Aug-05″, open: 43.39, high: 44.12, low: 43.25, close: 44}, {date: “12-Aug-05″, open: 43.46, high: 46.22, low: 43.36, close: 46.1}]; ]]> </mx:Script> <mx:CandlestickChart id=”mychart” dataProvider=”{aapl}” showDataTips=”true” height=”400″ width=”400″> <mx:series> <mx:CandlestickSeries dataProvider=”{aapl}” openField=”open” highField=”high” lowField=”low” closeField=”close” displayName=”Candle chart”> <mx:stroke> <mx:Stroke weight=”1″/> </mx:stroke> </mx:CandlestickSeries> </mx:series> </mx:CandlestickChart> <mx:Legend dataProvider=”{mychart}”/> </mx:Application>

Column Chart in Flex

columnChart.mxml

<?xml version=”1.0″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml“> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month: “Jan”, Profit: 2000, Expenses: 1500 }, {Month: “Feb”, Profit: 1000, Expenses: 200}, {Month: “Mar”, Profit: 1500, Expenses: 500}]); ]]> </mx:Script> <mx:Panel> <mx:ColumnChart id=”column” dataProvider=”{expenses}”> <mx:horizontalAxis> <mx:CategoryAxis dataProvider=”{expenses}” categoryField=”Month”/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField=”Month” yField=”Profit” displayName=”Profit”/> <mx:ColumnSeries xField=”Month” yField=”Expenses” displayName=”Expenses”/> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider=”{column}”/> </mx:Panel> </mx:Application>

High Low Open Close Charts in Flex

<?xml version=”1.0″ encoding=”iso-8859-1″?> <mx:Application xmlns:mx=” http://www.blogger.com/ “> <mx:Script> <![CDATA[ [Bindable] public var aapl:Array = [ {date: “1-Aug-05″, open: 42.57, high: 43.08, low: 42.08, close: 42.75}, {date: “2-Aug-05″, open: 42.89, high: 43.5, low: 42.61, close: 43.19}, {date: “3-Aug-05″, open: 43.19, high: 43.31, low: 42.77, close: 43.22}, {date: “4-Aug-05″, open: 42.89, high: 43, low: 42.29, close: 42.71}, {date: “5-Aug-05″, open: 42.49, high: 43.36, low: 42.02, close: 42.99}, {date: “8-Aug-05″, open: 43, high: 43.25, low: 42.61, close: 42.65}, {date: “9-Aug-05″, open: 42.93, high: 43.89, low: 42.91, close: 43.82}, {date: “10-Aug-05″, open: 44, high: 44.39, low: 43.31, close: 43.38}, {date: “11-Aug-05″, open: 43.39, high: 44.12, low: 43.25, close: 44}, {date: “12-Aug-05″, open: 43.46, high: 46.22, low: 43.36, close: 46.1}, ]; ]]> </mx:Script> <mx:HLOCChart id=”mychart” dataProvider=”{aapl}” showDataTips=”true”> <mx:verticalAxis> <mx:LinearAxis minimum=”30″ maximum=”50″/> </mx:verticalAxis> <mx:series> <mx:HLOCSeries dataProvider=”{aapl}” openField=”open” highField=”high” lowField=”low” closeField=”close” displayName=”AAPL”> </mx:HLOCSeries> </mx:series> </mx:HLOCChart> <mx:Legend dataProvider=”{mychart}”/> </mx:Application>

Line Charts in Flex

lineChart.mxml

<?xml version=”1.0″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml'>http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml “> <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”> <mx:LineChart dataProvider=”{expenses}” showDataTips=”true” id=”myChart”> <mx:series> <mx:LineSeries yField=”Profit” displayName=”Profit”> <!– You can change the width and color of the lines for each series by using the <mx:lineStroke> tag. The default line is 3 pixels wide and has a shadow. The following code sets a custom color and width for the series Stroke object. –> <mx:lineStroke> <mx:Stroke color=”0xFF33CC” weight=”5″/> </mx:lineStroke> </mx:LineSeries> <mx:LineSeries yField=”Expenses” displayName=”Expenses” lineSegmentRenderer=”mx.charts.renderers.ShadowLineRenderer”/> <mx:LineSeries yField=”Amount” displayName=”Amount”/> </mx:series> <mx:seriesFilters> <!– The default appearance of the lines in a LineChart control is with drop shadows. You can remove these shadows by setting the chart control's seriesFilters property to an empty Array. –> <mx:Array/> </mx:seriesFilters> <mx:horizontalAxis> <mx:CategoryAxis dataProvider=”{expenses}” categoryField=”Month”/> </mx:horizontalAxis> </mx:LineChart> </mx:Panel> </mx:Application>

Plot charts in flex

plotChart.mxml

<?xml version=”1.0″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml “> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:”January”, Profit:2000, Expenses:1500, Amount:450,IT:1300, Media:1100, MBA:250}, {Month:”February”, Profit:1000, Expenses:200, Amount:600,IT:1340, Media:1120, MBA:450}, {Month:”March”, Profit:1500, Expenses:500, Amount:300,IT:1230, Media:1230, MBA:650}, {Month:”April”, Profit:500, Expenses:300, Amount:500,IT:1378, Media:1430, MBA:800}, {Month:”May”, Profit:1000, Expenses:450, Amount:250,IT:1534, Media:1300, MBA:950}, {Month:”June”, Profit:2000, Expenses:500, Amount:700,IT:1989, Media:1200, MBA:150} ]); ]]> </mx:Script> <mx:Panel title=”Plot Chart”> <mx:PlotChart id=”myChart” dataProvider=”{expenses}” showDataTips=”true”> <mx:series> <mx:PlotSeries xField=”Expenses” yField=”Profit” displayName=”cross” itemRenderer=”mx.charts.renderers.CrossItemRenderer” radius=”10″/> <mx:PlotSeries xField=”Amount” yField=”Expenses” displayName=”diamond” itemRenderer=”mx.charts.renderers.DiamondItemRenderer” /> <mx:PlotSeries xField=”Profit” yField=”Amount” displayName=”triangle” itemRenderer=”mx.charts.renderers.TriangleItemRenderer” /> <mx:PlotSeries xField=”Profit” yField=”IT” displayName=”default(BOX)”/> <mx:PlotSeries xField=”Profit” yField=”Media” displayName=”circle” itemRenderer=”mx.charts.renderers.CircleItemRenderer” /> <mx:PlotSeries xField=”Profit” yField=”MBA” displayName=”shadow box” itemRenderer=”mx.charts.renderers.ShadowBoxItemRenderer” /> </mx:series> </mx:PlotChart> <mx:Legend dataProvider=”{myChart}”/> </mx:Panel> </mx:Application>

Pie chart in Flex

pieChart.mxml

<?xml version=”1.0″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml“> <mx:Script> <![CDATA[ import mx.formatters.*; import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Expense:”Taxes”, Amount:2000}, {Expense:”Rent”, Amount:1000}, {Expense:”Bills”, Amount:100}, {Expense:”Car”, Amount:450}, {Expense:”Gas”, Amount:100}, {Expense:”Food”, Amount:200} ]); // Create a bindable Array of explode radii. [Bindable] public var explodingArray:Array = [0,0,0,.2,0,0] public function display(data:Object,field:String,index:Number,percentValue:Number):String { return data.Expense + “:$” + data.Amount + “\n” + round(percentValue,2) + “%”; } // Rounds to 2 places: public function round(num:Number, precision:Number):Number { var result:String; var f:NumberFormatter = new NumberFormatter(); f.precision = precision; result = f.format(num); return Number(result); } ]]> </mx:Script> <mx:Panel title=”using labels”> <mx:PieChart id=”myChart” dataProvider=”{expenses}” showDataTips=”true” innerRadius=”.3″> <!– by adding the radius property to the piechart we are able to create a doughnut chart. –> <mx:series> <mx:PieSeries field=”Amount” nameField=”Expense” labelPosition=”callout” explodeRadius=”.12″ perWedgeExplodeRadius=”{explodingArray}” labelFunction=”display”/> <!– explodeRadius is a number between 0 and 1 Include one either explodeRadius or perWedgeExplodeRadius for explosion of wedges. To explode all wedges of a pie chart evenly,adding the explodeRadius property to the pieseries we are able to create a exploding pie chart. To explode one or more wedges of the pie, you use an Array of explodeRadius values. Each value in the Array applies to the corresponding data point.–> </mx:series> </mx:PieChart> <mx:Legend dataProvider=”{myChart}”/> </mx:Panel> </mx:Application>