flot.js Legend and Grid options

Question

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?

Answer 1

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' }})
});​

Answer 2

Replace

legend: { show: true, container: $('#legendholder') },

with

legend: { show: true, placement: 'outsideGrid', container: $('#legendholder') },