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