Question

Can I plot charts like this http://developer.yahoo.com/yui/examples/charts/charts-rotation.html using flot ?

I mean, I have two series with the same values on the x axis, I want to show them aligned together like in the example above, Flot plots them one above the another.

Any ideas ?

Answer 1

Well this is a bit late, but here’s how you do it… Flot does not support this out of the box, but there’s a perfectly good patch and plugin that will get it doing what you want.

You get them from Flot Issue #159. You’ll need to patch your flot (depending on what revision you’re using, there’s a few copies in the issue). I had a reject or two from the patch due to using a newer revision… Then add the multi plugin to your javascript sources after flot. Finally, use multiplebars:true in your actual plot call’s options.

Here’s the general idea of what it will look like once you have the right scripts ready to go:

$.plot($("#placeholder"), [ d1, d2, d3 ], {
  series: {
    bars: { show: true, barWidth: 0.3, align:'center' }
  },
  multiplebars:true
});

You can see it in action here: http://jsfiddle.net/ryleyb/B3uGP/2/

EDIT: Note that since I made this answer, flot has moved over to github. Over there, someone has made a pull request that includes the multi plugin which will apply better to current versions of the code.