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>
IndiBlogger
Flex Recipes 