Popup

[martin.berg]

In the example you show a nice popup for every box with a mouse over
event, how did you implements this? Could you post code for this?

Thanks

[martin.berg]

Like

http://it.usaspending.gov/?q=content/current-year-fy2009-enacted

[martin.berg]

http://recoveryact.juiceanalytics.com/treemap/

[Chris Gemignani]

Hi Martin:

For the Recovery Act treemap, we created a component called Rollover.mxml that contained the following:

---

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

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="320" height="90" styleName="treeMapRollOver">

    <mx:Script>

        <![CDATA[

        [Bindable]

        public var nodeName:String;

        [Bindable]

        public var nodeDescription:String = "";

        private static const offset:Point = new Point(20, 20);

        public function position(mousePt:Point, boundsRect:Rectangle):void {

            this.x = mousePt.x + offset.x;

            this.y = mousePt.y + offset.y;

            if ((this.x + this.width) > boundsRect.width) {

              this.x = mousePt.x - offset.x - this.width;

            }

            if ((this.y + this.height) > boundsRect.height) {

              this.y = mousePt.y - offset.y - this.height;

             }

          }

        ]]>

    </mx:Script>

    <mx:VBox x="10" y="10">

        <mx:Label width="300" styleName="description" fontFamily="ArialEmbeddedBold" color="#eeeeee" text="{nodeName}"/>

        <mx:Label width="300" styleName="tinyLabel" color="#eeeeee" text="{nodeDescription}"/>

        <mx:Label width="300" styleName="description" color="#ffff33" text="Click on any box for details and to vote."/>

    </mx:VBox>

</mx:Canvas>

In the main treemap component we added event handlers for jkDataMouseOver and jkDataMouseOut, which are triggered when users mouse over cells.

   <controls:TreeMapControl id="tree"

      top="130"

      left="20"

      sizeEncodingField="totalcost"

      transitionPeriod="1.0"

      colorEncodingField="membercost"

      width="400" height="400"

      labelEncodingField="name"

      buttonMode="true"

      useHandCursor="true"

      fontFamily="MuseoEmbedded"

      fontSize="18"

      fontColor="0x000000"

      truncateToFit="true"

      textAlign="left"

      textPosition="top"

      jkDataMouseOver="onMouseOver(event)"

      jkDataMouseOut="onMouseOut(event)"

      jkDataClick="onClick(event)"

      />

The event handlers look like this (and are in a mx:Script tag):

            private var rollover:Rollover = new Rollover();

            public function onMouseOver(event:DataMouseEvent):void{

                rollover.position( new Point(event.localX, event.localY)

                                 , new Rectangle( tree.x, tree.y, tree.width, tree.height));

                // Make the panel visible

                tree.addChild(rollover);

                var sendingNode:NodeSprite = event.sender as NodeSprite;

                rollover.nodeName = sendingNode.data.name;

                rollover.nodeDescription = sendingNode.data.description;

            }

             private function onMouseOut(event:DataMouseEvent):void {

              // Hide the panel

              tree.removeChild(rollover);

            }

I apologize, but the Recovery Act production code isn't yet shared on github (http://github.com/chrisgemignani/recovery-act-treemap/tree/master). I hope this gives you enough pointers to move forward. Let me know if you have more questions.

Regards,

Chris Gemignani

--
Chris Gemignani
Juice Analytics
phone: 571.205.4789

[martin.berg]

Thanks, that helped a lot, now just the skinning(that I'll do my
self ;)

> phone: 571.205.4789