-
Book Overview & Buying
-
Table Of Contents
HTML5 Graphing and Data Visualization Cookbook
By :
Although we created a legend in the past, our legend was bound to be non-interactive as we had no way to move it around. In this sample, we will create a quick and easy legend that will update its position and fade in and fade out when a user rolls over our chart.
Grab the latest files from our previous recipe, 06.03.fade.html and 06.03.fade.js, and let's jump right in. We will hardcode our values in this example, but a more modular approach of extracting elements that would be dynamic is a great way to make this class reusable.
This time around we will create a method in the LineChart object that will create legends for us. Perform the following steps:
Create the createLegend method:
LineChart.prototype.createLegend = function (){
var can = document.createElement("canvas");
can.width=70;
can.height=100;
can.setAttribute("class","canvasLayer");
chartContainer.appendChild(can);
this.legend = can;
this.updateLegend...
Change the font size
Change margin width
Change background colour