Flex: interactive legend – highlight series

Some while ago Kyle posted on his blog an article about interactive legend.

As this was a requirement for an application I was developing I will tell you what I’ve done. And thanks to Kyle for the help.

I wanted that upon mouse over a legend item the corresponding series in the chart will be marked in some way.
Everything is loosely coupled and I could have more then one chart (but only one legend).
I also wanted it to go the other way: on mouse over a series in the chart its corresponding legend item should be marked.
Because of a lack in space the legend item text should be truncated with a tooltip, this is not the default behavior of a legend – if the text has not enough space the label is cut.

First I have extended the LegendItem class so it can be highlighted. The new class (LegendItemExtended) is used as a legendItemClass in the legend.
In this extended class I also took care of the label truncation, the default component for the text is UITextField and this one does not support truncation. So I have made a new Label, passed it some needed properties from the original UITextField and hided the original.

Because everything should be loosely coupled the communication is done with events.
I made my own event for this: InteractiveLegendEvent.
This event holds the name of the current item – this is actually the displayName.

On legend itemMouseOver and itemMouseOut this event is dispatched.
It is also dispatched on each series mouseOver and mouseOut events.

Later these events are handled (in the sample it is done on the Application level): first the corresponding series is found, and then I give it a glow filter and some animation effect.

Demo is here (right click for source)
Source is here


5 Responses to Flex: interactive legend – highlight series

  1. lynda0119 says:

    Shemesh, this is great and just what I needed. However, I can’t download the source for import shemesh.LegendItemExtended;
    import shemesh.InteractiveLegendEvent;
    is it possible if you can post those?

  2. shemesh says:

    i do not understand (or encountered) your problem.
    when you look at the source code, at your left-bottom side, just underneath the source tree there is a link: “Download source…” this will download load a zip with all needed files.
    try it!
    if still not working plz post again.

  3. lynda0119 says:

    thanks shemesh. I got it. They blocked it here at my work thus am not allow to download but I was able to when i got home. Another question for you maybe you can help. I have a dynamic LineSeries and I want to create or set new colors to it and not using the default colors. How can i do that?

  4. shemesh says:

    sure.. it is pretty easy setting series style in code:

    first create a new Stroke:
    var str:Stroke = new Stroke();
    str.color = 0xFFCC00;
    str.weight = 10;

    then set it to your series:
    yourLineSeries.setStyle(“lineStroke”, str);

  5. lynda0119 says:

    thanks much. Will give it a try.

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: