Flot Chart Custom Legend
Flot chart provides servial attribues that you can use to customize chart legend.
Chart legend with specified position and number of columns
Source Code
Expand
Chart legend using container to put legend in your designated place
Source Code
Expand
legend: { show: boolean //show or hide legend labelFormatter: null or (fn: string, series object -> string) //formatting your legend label by using custom functions labelBoxBorderColor: color //label border color noColumns: number //number of legend columns position: "ne" or "nw" or "se" or "sw" //legend position (north east, north west, south east, south west) margin: number of pixels or [x margin, y margin] backgroundColor: null or color backgroundOpacity: number between 0 and 1 container: null or jQuery object/DOM element/jQuery expression }
Chart legend with specified position and number of columns
ExampleChart legend with specified position
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script> <script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script> <!-- CSS --> <style type="text/css"> #flotcontainer { width: 600px; height: 200px; text-align: left; } </style> <!-- Javascript --> <script type="text/javascript"> $(function () { function GenerateSeries(added){ var data = []; var start = 100 + added; var end = 500 + added; for(i=1;i<=20;i++){ var d = Math.floor(Math.random() * (end - start + 1) + start); data.push([i, d]); start++; end++; } return data; } var data1 = GenerateSeries(0); var data2 = GenerateSeries(10); var data3 = GenerateSeries(20); var pos = "ne"; var options = { legend:{ backgroundOpacity: 0.5, noColumns: 0, backgroundColor: "green", position: pos } }; $("input").change(function(){ $(this).changeposition(); }); $.fn.changeposition = function(){ pos = $(this).val(); options = { legend:{ noColumns: 0, backgroundColor: "green", position: pos } }; makeChart(); }; function makeChart(){ $.plot($("#flotcontainer"), [ {label:"data1", data:data1}, {label:"data2", data:data2}, {label:"data3", data:data3} ], options ); } makeChart(); }); </script> <!-- HTML --> <div> <div id="flotcontainer"></div> <br> Legend Position : <input id="r1" checked name="R1" type="radio" value="ne" />North East <input id="r2" name="R1" type="radio" value="nw" />North West <input id="r3" name="R1" type="radio" value="se" />South East <input id="r4" name="R1" type="radio" value="sw" />South West </div>
Chart legend using container to put legend in your designated place
ExampleChart legend using container
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script> <script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script> <!-- CSS --> <style type="text/css"> #legendContainer { background-color: #fff; padding: 2px; margin-bottom: 8px; border-radius: 3px 3px 3px 3px; border: 1px solid #E6E6E6; display: inline-block; margin: 0 auto; } #flotcontainer { width: 600px; height: 200px; text-align: left; } </style> <!-- Javascript --> <script type="text/javascript"> $(function () { function GenerateSeries(added){ var data = []; var start = 100 + added; var end = 500 + added; for(i=1;i<=20;i++){ var d = Math.floor(Math.random() * (end - start + 1) + start); data.push([i, d]); start++; end++; } return data; } var data1 = GenerateSeries(0); var data2 = GenerateSeries(10); var data3 = GenerateSeries(20); var options = { legend:{ container:$("#legendContainer"), noColumns: 0 }, grid: { backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] } } }; $.plot($("#example-section24 #flotcontainer"), [ {label:"data1", data:data1}, {label:"data2", data:data2}, {label:"data3", data:data3} ], options ); }); </script> <!-- HTML --> <div id="example-section24"> <div id="legendContainer"></div> <div id="flotcontainer"></div> </div>