This example shows how to configure the legend. Note I also added a style
tag
(between the header
tags) to add a 2px border to the legend container. I could also
style other legend elements. The elements get the the following css classes when they're generated:
Finished? Go to the example index page or the Flotr Documentation Pages.
/**
* Wait till dom's finished loading.
*/
document.observe('dom:loaded', function(){
/**
* Fill series d1 and d2.
*/
var d1 = [];
var d2 = [];
var d3 = [];
for(var i = 0; i < 15; i += 0.5){
d1.push([i, i + Math.sin(i+Math.PI)]);
d2.push([i, i]);
d3.push([i, 15-Math.cos(i)]);
}
/**
* This function prepend each label with 'y = '.
*/
function myLabelFunc(label){
return 'y = ' + label;
}
/**
* Draw the graph.
*/
var f = Flotr.draw(
$('container'), [
{data:d1, label:'x + sin(x+π)'},
{data:d2, label:'x'},
{data:d3, label:'15 - cos(x)'}
],{
legend:{
position: 'se', // => position the legend 'south-east'.
labelFormatter: myLabelFunc, // => format the labels.
backgroundColor: '#D2E8FF' // => a light blue background color.
},
HtmlText: false
}
);
});