Adds legend to line graph w/ hover & toggle

[tonyhb]

This commit adds a non customisable legend to the graph via a 'line_name' option for each line. It takes the colour of each line and the optional 'line_name' argument and creates a legend in the top right corner of the graph showing what each line represents.

When you hover over either a thumbnail or label for a line, the line on the graph glows (with a drop-shadow), and you can toggle a line's visibility by clicking its label/thumbnail in the legend.

This adds the following methods to the Line class:

• glow - adds a glow to the line and dots
• remove_glow - removes the glow from the line and dots
• hide - hides the line, dots and area
• show - shows the line, dots and area
• toggle - toggles the line, dot and area visibility

These methods provide the basis for our extra functionality and can be called on the line directly.

There's also a @lines property of the LineChart class which saves all Lines created when drawing the graph.

This is how it looks:

In this graph we've named the first two lines (Control and Variation A) – the rest are automatically named for us. We've also hidden two of the lines from the graph by clicking on their legend labels (clicking the colour thumbnail also toggles line visibility), and whenever you hover over a line label, thumbnail or dot the line in question glows.

This has been tested in all major browsers (IE7+, Chrome, Safari, FF and Opera) and works well.

I've added a few sets to the Line class to make this easy to work with, though hopefully it'll only take a quick review and to be good to merge into master :)

Also, this is how it looks with the axis label pull request (from commit 0f3d49650e):

What are your thoughts?

[jcarver989]

Cool legend - looks like there is a bug with @area.hide()/show() being called when it's potentially not defined. I've intentionally left legends out of raphy-charts thus far as I've found different projects require different legend designs/functionality - so I see this more as an external component rather than part of the line chart itself.

Perhaps a nice way to do this would be to have a Legend class that takes in an array of elements in the chart (they might not necessarily have to be lines) - we'd just expect these objects to be Raphael objects. Then you could call show/hide/glow inside of Legend instead of having to add methods to Line (assuming you'd pass a set containing the elements to be manipulated by the legend. This would allow a more reusable legend for other (future) charts.

[tonyhb]

Hey Josh,

Yeah sounds like a good way to do it – you'd hopefully then be able to re-use this over different graph types, instead of coding it into each class. I've got a fair bit of work on right now, so I'll have a look at it this week and make something along the lines of a Legend class this weekend.

Thanks for reviewing!

[jgentes]

This is a great enhancement.. quick question: are the coffeescript files necessary for the new features to work?

[maricris-sn]

Just checking the fill_area options helped me use the show/hide for area on click action on the legend, regardless whether the fill_area was set or not.

  Line.prototype.hide = function() {
    if(this.options.fill_area){
      this.area.hide();
    }
    this.line_set.hide();
    this.remove_glow();
    return this.visible = false;
  };

  Line.prototype.show = function() {
    if(this.options.fill_area){
      this.area.show();
    }
    this.line_set.show();
    return this.visible = true;
  };