Subscribe

  • Subscribe  

Building interactivity into Flex charts

Posted by Harry Vikatos | June 26, 2008 .

Charts are mostly thought as a way to present information. In some cases though charts can provide a good means for the user to enter or rather alter data, while still graphically viewing the result of his interaction.

We’ll showcase this using a bubblechart in combination with a simple function producing data correlation as follows:

Radius = abs(x-y)

Only one data point is displayed for (x,y) values of (2, 50). However the bubble id draggable. By dragging the bubble, you set new values for x and y, and the radius is accordingly adjusted, as seen on the demo application below:

That is all achieved by using a custom item renderer for the series. What is special about that renderer is that it detects mouseDown event. On such an event it gets the initial values of its associated data (dataX, dataY) and the mouse position (stageX, stageY). It then listens for mouseMove and mouseUp events.

On mouseMove, the following function is executed:

private function moving(event:MouseEvent):void
{
  var dm:DataModeler = _data.item as DataModeler;
  var x:Number = dataX + (event.stageX - stageX) * (hMax - hMin) / parent.width;
  if (x > hMin && x < hMax)
  {
    dm.x = x;
  }

 var y:Number = dataY + (stageY - event.stageY) * (vMax - vMin) / parent.height;
 if (y > vMin && y < vMax)
 {
   dm.y = y;
 }

 }


The new x and y values are calculated by tracking the mouse move and then passed back into the underlying data object (of class DataModeler). Once that is done the bubble moves to the new data position.

On mouseUp the whole process stops.

Now all that sounds simple enough for one data point. When more are present things may get a bit funny!

More of that in our next post.

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

1 Comment so far
  1. PIERRE  September 7, 2008 6:24 am

    Hello,

    This example is also very interesting. Is it possible to view the source code.

    Regards.

<

Direct TV Offers - usdirect has the best directtv deals