Search code examples
javascriptjquerychartsyuiflot

Flot - Column charts, series aligned together

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 ?

Solution

  • 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.