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
August 26, 2008 at 19:20 |
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?
August 26, 2008 at 20:26 |
Lynda,
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.
August 27, 2008 at 22:28 |
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?
August 27, 2008 at 23:07 |
Lynda,
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);
August 27, 2008 at 23:33 |
thanks much. Will give it a try.