Tag Archive | ColumnChart
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>