Initial toggling of datasets from the legend.

Still need to do:
- clicking on text in legend
- toggling style of legend based on dataset style
- figure out if we need an

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 2b78ab2332d6fe59fa9297df84d499af531bc488..f05269c7626d3b186d1b111737eff83f3f76c01c 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -448,6 +448,10 @@
                                if (this.options.onClick) {
                                        this.options.onClick.call(this, e, this.active);
                                }
+
+                               if (this.legend && this.legend.handleEvent) {
+                                       this.legend.handleEvent(e);
+                               }
                        }
 
                        var dataset;

diff --git a/src/core/core.legend.js b/src/core/core.legend.js
index b8bf967345f9ba14ca82d1b1585998ecf7068a5b..d6abcafad255cd54c65512526d05dfc69ef1c061 100644 (file)
--- a/src/core/core.legend.js
+++ b/src/core/core.legend.js
@@ -47,6 +47,9 @@
                initialize: function(config) {
                        helpers.extend(this, config);
                        this.options = helpers.configMerge(Chart.defaults.legend, config.options);
+
+                       // Contains hit boxes for each dataset (in dataset order)
+                       this.legendHitBoxes = [];
                },
 
                // These methods are ordered by lifecyle. Utilities then follow.
@@ -196,6 +199,9 @@
 
                // Actualy draw the legend on the canvas
                draw: function() {
+                       // Reset hit boxes
+                       this.legendHitBoxes = [];
+
                        if (this.options.display) {
 
                                console.log(this.labelWidths);
@@ -254,6 +260,13 @@
                                                ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
                                                ctx.restore();
 
+                                               // Store the hitbox
+                                               this.legendHitBoxes[i] = {
+                                                       left: cursor.x,
+                                                       top: cursor.y,
+                                                       right: cursor.x + this.options.labels.boxWidth,
+                                                       bottom: cursor.y + this.options.labels.fontSize,
+                                               };
 
                                                ctx.fillText(label, this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y);
                                                cursor.x += width + (this.options.labels.padding);
@@ -303,6 +316,30 @@
 
                                }
                        }
+               },
+
+               // Handle an event
+               handleEvent: function(e) {
+                       var position = helpers.getRelativePosition(e, this.chart.chart);
+
+                       if (position.x >= this.left && position.x <= this.right && position.y >= this.top && position.y <= this.bottom) {
+                               // Legend is active
+                               if (this.options.onClick) {
+                                       this.options.onClick.call(this, e);
+                               } else {
+                                       // See if we are touching one of the dataset boxes
+                                       for (var i = 0; i < this.legendHitBoxes.length; ++i) {
+                                               var hitBox = this.legendHitBoxes[i];
+                                               if (position.x >= hitBox.left && position.x <= hitBox.right && position.y >= hitBox.top && position.y <= hitBox.bottom) {
+                                                       this.chart.data.datasets[i].hidden = !this.chart.data.datasets[i].hidden;
+
+                                                       // We hid a dataset ... rerender the chart
+                                                       this.chart.render();
+                                                       break;
+                                               }
+                                       }
+                               }
+                       }
                }
        });