Drag and Drop Line Series Segments

December 3, 2007

The default drag and drop behavior in Flex 3 Charts drags the itemRenderers used in the Series. However for LineSeries and AreaSeries there need not be an itemRenderer and drag will not happen when there are no itemRenderers.

This example will enable users to drag and drop Line Series Segments in a Line Chart. The idea here is

  • Create a new dragproxy for the LineChart which renders the line segments
  • In the dragproxy, create the line segments and set the bounds
  • Creation of line segments is handled using the instancecache classes

Couple of caveats:

  • To choose the series in the dragproxy I have used the series of the item that I get from selectedChartItem, this could be changed to your requirements.
  • Also, the by default dragEvent will be dispatched, only when a drag happens on an itemRenderer, this could be overcome by generating the dragEvent in MyLineChart based on the position of the mouse

Here is the screenshot of the drag and drop in Action:


Here is the source:





Hopefully you can drag and drop LineSeries which provides a better effect than just dragging the itemRenderers, I think the same concept could be applied to Area Series as well.


3 Responses to “Drag and Drop Line Series Segments”

  1. mico Says:

    Nice, but you should definitely make a demo 😀

  2. hoirong Says:

    drop is not possible huithui………
    namai mathu kasubi

  3. Haibo Says:

    That’s really cool.

    I have a question. When I converted it to AIR app, it stops working. Any idea why?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: