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>

5 Responses to “Customize Tooltip in ColumnChart”

  1. This is the right weblog for anyone who wants to search out out about this topic. You realize a lot its virtually exhausting to argue with you (not that I really would need匟aHa). You definitely put a brand new spin on a topic thats been written about for years. Nice stuff, just great!

    • ajeethboaz says:

      Thank you…

    • Dede says:

      Por favor, eu ja tenho as formulas para mogaentn to grafico waterfall mas nao sei como fazer para que as cores das barras mudem automaticamente de acordo com o sinal da variae7e3o.Qual seria o codigo VBA que eu devo utilizar para fazer com que as barras mudem de cor automaticamente?Obrigado

    • Kamila says:

      If you wrote an article about life we’d all reach elinghetnment.

  2. Fachri says:

    AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes Christophe Coenraet wrote: One of the exciting fauteres of AIR is that it enables drag-and-drop between your Flex applications and the desktop: For example, you could drag a chart from your Flex application and drop it on your desktop as a JPG, or directly inside a Word document. Similarly, you could grab some rows from a Datagrid and drop them on your desktop as an XLS file, or directly inside an Excel spreadsheet.

Top
Follow

Get every new post delivered to your Inbox

Join other followers