Flotr: Basic Legend Example

Example

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:

• flotr-legend → Legend wrapper element.
• flotr-legend-bg → Legend background element.
• flotr-legend-color-box → Legend color box.
• flotr-legend-label → Legend label.

Finished? Go to the example index page or the Flotr Documentation Pages.

The Code

/**
 * 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
		}
	);
});