2 Replies Latest reply on Aug 23, 2010 12:04 AM by betheflexcoder

    chart with a data tip used as a custom tooltip

    betheflexcoder Level 2

      Is it possible to have a chart component with datatip as a tooltip for a label?

        • 1. Re: chart with a data tip used as a custom tooltip
          thebouv Level 2

          Yes, you can put pretty much anything you want to in a custom tool tip, including charts.

           

          Here is a Pie Graph, with it's datatips showing, in a tool tip that's on a label that I just made for you as an example.  You can right-click and view the source:

           

          http://thebouv.com/flex/tooltip/

          • 2. Re: chart with a data tip used as a custom tooltip
            betheflexcoder Level 2

            Hi,

             

            I looked at the code sent by you.  I got till that step previously but could not hover on the custom tool tip in order to view the data tip of the chart. The custom tooltip disappears when I try to hover on it to see the data tip. I tried to hover on it by disabling the tooltip manager, this worked fine. But could not make the custom tool tip disappear after mouse out from it. COuld not catch the exact point to remove the tooltip using the ToolTip manager.

             

            I am adding my code below which is a item renderer for a label with the custom tooltip. In my case, the hover is on a datagrid cell.

             

            package
            {

            import flash.display.DisplayObject;
            import flash.events.FocusEvent;
            import flash.events.MouseEvent;

            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.DateField;
            import mx.controls.Label;
            import mx.controls.ToolTip;
            import mx.core.FlexGlobals;
            import mx.core.IToolTip;
            import mx.core.IUIComponent;
            import mx.events.DynamicEvent;
            import mx.events.ToolTipEvent;
            import mx.managers.ISystemManager;
            import mx.managers.ToolTipManager;
            import mx.utils.ObjectUtil;

            public class MyHoverRenderer extends ItemRenderer
            {
             
             
              private var lastOrderedLbl:Label;
             
              private var customToolTip:ItemHistoryHoverToolTip;
             
              private var sm:ISystemManager;
             
              private var previousTarget:DisplayObject;
             
              [Bindable] private var graphData:ArrayCollection;
             
              [Bindable] private var avgCaseQuantity:String;
              [Bindable] private var avgSplitQuantity:String;
             
              [Bindable] private var _lastOrdered:String;
             
              public function MyHoverRenderer()
              {
               super();
               lastOrderedLbl = new Label();
              
               lastOrderedLbl.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, lastOrderedToolTipHandler);
               lastOrderedLbl.addEventListener(MouseEvent.MOUSE_OVER, mouseOverEventHandler);
              
              }
             
              override public function set data(value:Object):void
              {
               //for data from the grid
               super.data = value;
               if(data!=null)
               {   
               
                if (data.lastOrderedDate)
                {
                 //_lastOrdered=rtn.itemLastRequestedDate.toString();
                 _lastOrdered= DateField.dateToString(data.lastOrderedDate, "MM/DD");
                }
               
               
               
               }
               setStyle("rowColor",0xFFFFFF);
              }
             
             
              override protected function updateDisplayList(unscaledWidth:Number,   unscaledHeight:Number):void
              {
               super.updateDisplayList(unscaledWidth, unscaledHeight);
               if(data!=null)
               {
                lastOrderedLbl.toolTip = " ";
               
               }
              
               this.addElement(lastOrderedLbl); 
                 
              }
             
              private function lastOrderedToolTipHandler(event:ToolTipEvent):void
              {
              
               if(data!=null)
               { 
                
                if(graphData)
                {
                 customToolTip = new ItemHistoryHoverToolTip();
                
                 event.toolTip = customToolTip;

                 ToolTipManager.enabled = false;
                 ToolTipManager.hideDelay = Infinity;
                 trace("graph data"+ObjectUtil.toString(graphData));
                 //event.toolTip.addEventListener(MouseEvent.MOUSE_OUT, focusOutEndHandler);
                } else
                {
                 event.toolTip = null;
                }
                
               }
              }
             
              private function mouseOverEventHandler(event:MouseEvent):void
              {
              
               ToolTipManager.enabled = true;
              
              
              }
             
             
             
              private function focusOutEndHandler(event:MouseEvent):void
              {
               /*Alert.show("focus out tooltip");
               ToolTipManager.enabled = true;
               if(ToolTipManager.currentToolTip)
               {
               var sm:ISystemManager = (ToolTipManager.currentToolTip).systemManager as ISystemManager;
               /*sm.topLevelSystemManager.toolTipChildren.removeChild(currentToolTip as DisplayObject);*/
               //var toolTipObject:DisplayObject =
                //Alert.show("present"+String(sm.topLevelSystemManager.toolTipChildren.getChildIndex(Tool TipManager.currentToolTip as DisplayObject)));
               //sm.topLevelSystemManager.toolTipChildren.removeChild(ToolTipManager.currentToolTip as DisplayObject);
               //}
               //}
              }
              
             
             
            }
            }