Question

I am using JQuery Flot graph plugin and having some difficulties. If someone has more knowledge, please help me out!

I am trying to show axis legend in a separate div outside of graph and also showing axis labels for X/Y axis. but somehow both things dont work together. if I comment out one, the other works fine. but not together. Here is my working code:

$.plot($(container), [
  {label:'Label1',data: dataPoints, lines: {show: true, lineWidth:1}, color:"#72BA82"},
  {label:'Label2',data: dataPoints2, lines: {show: true, lineWidth:1}, color:"#000"}
  ],
  {legend: { show: true, noColumns:3, container: '#graph1LegendHolder' }},
  {xaxis:{show: true,axisLabel: "Time",axisLabelFontSizePixels: 12 },
  yaxis:{show: true,axisLabel: "Amount",axisLabelFontSizePixels:12
  }}
);

As I mentioned above, legend and axis lines dont work together but otherwise code is correct I believe. Any idea how to make both work together?

thanks!

Answer 1

You’re passing the legend and axis options as two separate options objects; Flot will ignore one of them, since it expects only one set of options. You need to combine them:

...
], {
    legend: { ... },
    xaxis: { ... },
    yaxis: { ... }
});