Archive | Flex Graphs
RSS for this section
Customize Tooltip in ColumnChart
The datatTipFunction here helps in displaying a yValue and its yName along with the DisaplayName, it can be be further customized based on the needs of the information to be displayed.
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var dpac:ArrayCollection = new ArrayCollection ([ { date:"01/01/2006", cash:50000, stocks:198192, retirement:130101, home:750000, other:19148 }, { date:"02/01/2006", cash:50000, stocks:210309, retirement:143707, home:760000, other:19493 }, { date:"03/01/2006", cash:50000, stocks:238992, retirement:169529, home:770000, other:19933 }, { date:"04/01/2006", cash:50000, stocks:292269, retirement:242596, home:770000, other:21445 }]); import mx.charts.series.items.ColumnSeriesItem; import mx.charts.series.ColumnSeries; import mx.charts.HitData; import mx.collections.ArrayCollection; private function myDataTipFunction(hitData:HitData):String { var series:ColumnSeries = ColumnSeries(hitData.element); var item1:ColumnSeriesItem = ColumnSeriesItem(hitData.chartItem); var date:Object = item1.item.date; var value:Number = Number(item1.yValue); return "<b>" + series.displayName + "</b>\n" + "<b>------------------</b>\n" + "<b>Date:\t\t</b>" + date + " \n" + "<b>Count:\t\t</b>" +series.displayName+":"+ value + " \n"; } ]]> </fx:Script> <mx:Legend dataProvider="{otherDashGraphCE}" direction="vertical" height="20" right="0"/> <mx:ColumnChart dataProvider="{dpac}" width="100%" height="90%" horizontalCenter="0" paddingLeft="5" paddingRight="5" showDataTips="true" id="otherDashGraphCE" bottom="15" dataTipFunction="myDataTipFunction"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="date"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries displayName="cash" yField="cash"/> <mx:ColumnSeries displayName="stocks" yField="stocks"/> <mx:ColumnSeries displayName="retirement" yField="retirement"/> <mx:ColumnSeries displayName="home" yField="home"/> <mx:ColumnSeries displayName="other" yField="other"/> </mx:series> </mx:ColumnChart> </s:Application>
Simple PieChart using mx:PieChart
This application helps to create a simple Pie Chart using mx:PieChart.
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Expense:"India", Amount:2000}, {Expense:"UK", Amount:1000}, {Expense:"USA", Amount:100}, {Expense:"Australia", Amount:450}, {Expense:"SriLanka", Amount:100}, {Expense:"France", Amount:200} ]); ]]> </fx:Script> <mx:PieChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="100%" height="90%" > <mx:series> <mx:PieSeries field="Amount" nameField="Expense" labelPosition="callout" /> </mx:series> </mx:PieChart> <mx:Legend dataProvider="{myChart}" direction="horizontal"/> </s:Application>
Simple Column Chart using mx:ColumnChart
This application helps to create a simple Column Chart using mx:ColumnChart.
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var dpac:ArrayCollection = new ArrayCollection ([ { date:"01/01/2006", cash:50000, stocks:198192, retirement:130101, home:750000, other:19148 }, { date:"02/01/2006", cash:50000, stocks:210309, retirement:143707, home:760000, other:19493 }, { date:"03/01/2006", cash:50000, stocks:238992, retirement:169529, home:770000, other:19933 }, { date:"04/01/2006", cash:50000, stocks:292269, retirement:242596, home:770000, other:21445 }]); ]]> </fx:Script> <mx:Legend dataProvider="{otherDashGraphCE}" direction="vertical" height="20" right="0"/> <mx:ColumnChart dataProvider="{dpac}" width="100%" height="90%" horizontalCenter="0" paddingLeft="5" paddingRight="5" showDataTips="true" id="otherDashGraphCE" bottom="15"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="date"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries displayName="cash" yField="cash"/> <mx:ColumnSeries displayName="stocks" yField="stocks"/> <mx:ColumnSeries displayName="retirement" yField="retirement"/> <mx:ColumnSeries displayName="home" yField="home"/> <mx:ColumnSeries displayName="other" yField="other"/> </mx:series> </mx:ColumnChart> </s:Application>
Create Your Own QR-Charts using Google’s chart API
This application helps to create a QR chart using Google’s chart API.
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <fx:Script> <![CDATA[ protected function button1_clickHandler(event:MouseEvent):void { image.source = "https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+qrvalue.text+"&choe=UTF-8"; } protected function qrvalue_clickHandler(event:MouseEvent):void { qrvalue.text = ""; } ]]> </fx:Script> <s:Label text="Welcome to QR charts" top="30" fontSize="24" horizontalCenter="0"/> <mx:VBox horizontalCenter="0" verticalCenter="0"> <s:TextInput text="Text to embed in QR Code:" click="qrvalue_clickHandler(event)" id="qrvalue"/> <s:Button click="button1_clickHandler(event)" label="Submit"/> <mx:Image id="image"/> </mx:VBox> </s:Application>