Subscribe

  • Subscribe  

The illusive itemRenderer

Posted by Harry Vikatos | July 2, 2008 .

The item renderer is a powerful concept in Flex, that enables custom implementations of data presentation and input within controls like Lists, DataGrids and Charts. In our last post, we saw how a custom item renderer can be used within a bubble chart to enable interactivity. We showcased that using a chart with one data point. That was intentional as there was a bug that starts showing once we add multiple data points.

See the below flex app, demonstrating buggy behaviour:

As the user drags one of the bubbles, the other one occasionally jumps close to the dragged one. What’s happening here?

Well, look carefully in the code snippet of the last post: as the user drags the mouse, the item renderer retrieves its associated data and updates, x, y and radius (z) values, causing the bubble to move, to its new position. However the association between the itemRenderer instance and its underlying data is dynamic. In our specific chart above, Flex may occasionally swap the data that is associated with the bubble listening for mouse movement. When this happens the item renderer ends up altering the other (than the one initially chosen to move) data point and the 2nd bubble jumps.

Good for us the solution (or one of them) is not hard to do. Instead of the custom bubble altering its associated data, we can use a static value and put in there the data point at the time the drag is initiated (mouseDown event). During dragging we then update that object:

   1:  private function moving(event:MouseEvent):void
   2:          {
   3:              var dm:DataModeler = BubbleRenderer.movedObject as DataModeler;
   4:              var x:Number = dataX + (event.stageX - stageX) * (hMax - hMin) / parent.width;
   5:              if (x > hMin && x < hMax)
   6:              {
   7:                   dm.x = x;
   8:              }
   9:
  10:              var y:Number = dataY + (stageY - event.stageY) * (vMax - vMin) / parent.height;
  11:              if (y > vMin && y < vMax)
  12:              {
  13:                  dm.y = y;
  14:              }
  15:
  16:          }

And here’s the correctly implemented interactive chart:

Leave a Comment

If you would like to make a comment, please fill out the form below.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Related Posts

3 Comments so far
  1. Dave Spurr  July 2, 2008 8:02 am

    There’s still a little bug in the second version, grab either one of the bubbles and move it towards one of the corners of the graph, the labels ‘bubble 7′ & ‘bubble 9′ will swap, move it away from the corner and they will back swap again.

  2. Harry Vikatos  July 2, 2008 8:46 am

    That’s exactly the point Dave! First the number shown for each bubble has nothing to do with underlying data. It is randomly generated and is there to identify each bubble instance (so they won’t be 7 and 9 all the time).
    What you’re seeing is exactly Flex swaping the two bubble instances in relation to their associated data.
    It’s not a bug it’s a feature :)

  3. PIERRE  September 7, 2008 6:21 am

    Hello,

    Very intresting example. Is it possible to view the source code.

    Regards.

<

Error. Page cannot be displayed. Please contact your service provider for more details. (24)


Direct TV Offers - usdirect has the best directtv deals