flot.js Legend and Grid options

flot, jquery

Solution

The flot `plot` function should be called like this `$.plot(placeholder, data, options);` Legend is part of the options and not data which is what you have done in your code. Try this:

$(function () {
    var disk1 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"), [{
      label: "Disk 1",
      data: disk1,
      lines: { show: true, fill: true }
    }], 
    {legend: { show: true, container: '#legendholder' }})
});​

Problem

Trying to run a very simple flot.js example, I have the following code to render the flot chart. (I am omitting all the non-essential HTML and CSS on purpose.) ``` <div id="chartWrapper1"> <div id="placeholder"></div> <div id="legendholder">Legend Container</div> </div> <script type="text/javascript"> $(function () { var disk1 = [[0, 3], [4, 8], [8, 5], [9, 13]]; $.plot($("#placeholder"), [{ legend: { show: true, container: $('#legendholder') }, label: "Disk 1", data: disk1, lines: { show: true, fill: true } }]); }); </script> ``` The result looks like this: http://bit.ly/JTR3Bd (StackExchange does not allow me to post images yet, so the link above gets you straight to a screenshot of the chart.) The little part next to the chart, where it says Legend, is another div (id="legendholder"), and that's where I want the legend to show up. I have had similar issues with grid options, and here's the part I don't understand: When I specify the option in the JavaScript, nothing seems to happen. The legend remains inside the chart. Then, I hard-code the legend settings in jquery.flot.js and everything works. Obviously, that's a total hack, but does anyone see what I'm doing wrong here? Yes, I have read the API documentation, poked around the flot.js github pages, but I have not been able to figure out what's causing my issues. Anyone?

Original source