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?

Nariko

So what's exactly the issue? You want to move the legend outside of the chart? It works - jsfiddle.net/UEePE/1670 – Maracaibo

Ahem, not to be rude or anything Zoltan Toth, but it doesn't even work in the jsfiddle you set up. Thank you for trying, though. If you want, I can take a screenshot on my system to show the problem. Perhaps it's just me? – Jornada

Mark, thank you for embedding the image into the post. You rock! – Nariko

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

Redvers

Thank you for pointing out my syntax issue, Satyajit. Now everything is working as I wanted it to work. Even my "grid" issues are now fixe, thanks to you. I really appreciate that. Thank you so much. – Nariko

Answer 2

Replace

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

with

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

Thingumabob