java - legend in a plot using flot jquery api -
i'm trying modify plot in order insert custom legend. code following
$(document).ready(function(){ graph = $('.graph').plot(formatflotdata(), { colors: [ '#20f', '#00ff4b', '#f00', '#fdff00'], xaxis: { show: false, min : 0, max : res }, yaxis: { min : -50, max : 50, font : { size: 11, lineheight: 13, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps", color: "#f2f2f2" }, color : "#f2f2f2" }, grid: { bordercolor : "#333", borderwidth : 3 } }).data("plot");
});
the html is:
<div class='graph' style="display : inline-block"></div> <div id="legend-container"></div>
the problem no matter try insert "legend:" declaration, doesn't seem work. i've tried right below grid declaration , comma after "}" right before ")" of plot function.
{legend: { show: true, container: '#legend-container' }}
answer is:
var options = { legend: { show: true, position: "ne", //backgroundcolor: "#fdff00", backgroundopacity: "0", margin: [-50,0] //container: null or jquery object/dom element/jquery expression }, ecc }; $(document).ready(function(){ graph = $('.graph').plot(formatflotdata(),options).data("plot"); });
the container
option needs jquery object/dom element/jquery expression:
legend: { show: true, container: $('#legend-container') }
this jsfiddle has working example.
Comments
Post a Comment