Tag Archive | Flex

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>

Advertisements

Cache/Refresh Problem in Internet Explorer – Solution

In Internet Explorer, the refresh doesn’t happen due to the caching done by IE.  To avoid this issue once for all the following settings has to be changed,

1) Go to Tools> internet options.

2) Browsing  History >  Settings > Check for new versions of stored pages >  Select Radio : “Every time i visit the page”then check your application.

All Refresh issues will be solved now….

 

Flex DataGrid

The following example demonstrates, displaying elements from an ArrayCollection in a DataGrid using the mx:dataGrid component.

Two methods have been used in the same example to display items in a datagrid, either by using a custom itemrenderer(first datagridcolumn) or by using the itemrenderer in the same mxml(second datagridcolumn). It helps in displaying Items in a datagrid when dynamic data is used ex: XML, Json etc.

<?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" minWidth="955" minHeight="600">

 <fx:Script>
 <![CDATA[
 import mx.controls.Alert;
 import mx.events.ListEvent;
 import mx.collections.ArrayCollection;

 public var ac:ArrayCollection = new ArrayCollection([
 { date:"2010/12/4", data:"party value", label:"Party"},
 { date:"2010/1/5",  data:"meeting value", label:"Meeting"},
 { date:"2010/12/15", data:"holiday value", label:"Holiday"},
 { date:"2010/12/15", data:"dinner value", label:"Dinner"},
 { date:"2010/12/15", data:"bedtime value", label:"Bedtime"}
 ]);

 ]]>
 </fx:Script>
  <mx:DataGrid id="myGrid" width="100%" dataProvider="{ac}">
    <mx:columns>
      <mx:DataGridColumn headerText="Col1" itemRenderer="itemRenderer" textAlign="center"/>

      <mx:DataGridColumn headerText="Col2" textAlign="center">
        <mx:itemRenderer >
          <fx:Component>
            <mx:HBox toolTip="{data.label}" horizontalScrollPolicy="off">
               <mx:Label verticalCenter="0" x="10" color="#635648"  fontWeight="bold"  text="{data.label}"/>
            </mx:HBox>
          </fx:Component>
        </mx:itemRenderer>   
      </mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>
</s:Application>

itemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>

 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 doubleClickEnabled="true"
 doubleClick="dummyClickHandler(event)">
 <fx:Script>
 <![CDATA[
 private function dummyClickHandler(event:Event):void
 {
 // do nothing
 }
 ]]>
 </fx:Script>
 <mx:Label text="{data.data}" fontWeight="bold"/>
 </mx:VBox>

Flex Tree –

The following example demonstrates, displaying elements from an ArrayCollection in a tree structure using the mx:tree component. It also displays the no of children under the parent item of the tree.

The labelFunction has been used in this example not only to display the no of children under the parent, It helps in displaying Items in a tree structure when dynamic data is used ex: XML, Json etc.

      
<?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" minWidth="955" minHeight="600">
	
<fx:Script>
   <![CDATA[
	import mx.collections.ArrayCollection;
	[Bindable] public var ac:ArrayCollection= new ArrayCollection([
		{ name: "Animals", 
         	  children: new ArrayCollection([{name:"dog"},{name:"cat"},
                  {name:"kitten"}])},
		{ name: "Fruits",  
		  children: new ArrayCollection([{name:"orange"},{name:"apple"} 
          ])}
         ]);
			
	private function Tree_labelFunc(item:Object):String {
		var suffix:String = "";
		if (Tree.dataDescriptor.hasChildren(item)) {
			suffix = " (" + item.children.length + ")";
		}
		return item.name+" "+suffix;
	}		
]]>
</fx:Script>
<mx:Tree   id="Tree"
	   labelFunction="{Tree_labelFunc}"
	   dataProvider="{ac}" openItems="1"     
	   openDuration="500" width="100%" height="100%">
</mx:Tree>

</s:Application>


<mx:Tree   id=”contentManagementTree”  itemRenderer=”treeRenderer” defaultLeafIcon=”{leaf}”  labelFunction=”{contentManagementTree_labelFunc}” dataProvider=”{contentmodel.topiclist}” openItems=”1″fontSize=”12″ color=”#0d1b02″ filters=”{textEmboss}”  fontFamily=”Calibri” fontAntiAliasType=”advanced”
contentBackgroundAlpha=”0″ borderAlpha=”0″ selectionColor=”#cbec91″ rollOverColor=”#98b26b”
openDuration=”500″ width=”100%” height=”100%” creationComplete=”contentManagementTree_creationCompleteHandler(event)” itemClick=”contetntMang_itemClickHandler(event)”  >
<!–tree–>
</mx:Tree>