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>