Creating a context-aware legend

Our goal will be to create a legend that updates based on what is under the user's mouse cursor as they roll over our application. Based on the mouse position of the user, we will update our legend to reflect the information that is under the user's mouse.

Getting ready

Grab the latest files from the previous recipe: 06.04.legend.html and 06.04.legend.js.

How to do it...

We aren't going to change anything in the HTML files so let's jump right into the JavaScript and build out our dynamic legend:

1. From the ChartLine constructor, remove rollover/rollout events as we want to keep our legend always visible:

     this.drawChart();
   
     this.createLegend();
     this.mainDiv.onmousemove = this.bind(this,this.onMouseMoveArea);
     this.mainDiv.onmouseover = this.bind(this,this.fadeInLegend);
     this.mainDiv.onmouseout = this.bind(this,this.fadeOutLegend);

2. Update the createLegend method:

   LineChart.prototype.createLegend = function (){
     var	can = document.createElement("canvas");
    ...