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

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

angular - Is it possible to get native element for formControl? -

javascript - Why jQuery Select box change event is now working? -