Multi series bar charts #238

dnschnur opened this Issue Sep 28, 2012 · 28 comments


None yet

1 participant

Flot member

Original author: (May 05, 2009 16:16:53)

It appears that when there are an even number of series in the dataset,
flot improperly calculates a starting offset and positions the bars
improperly. See the attached pdf. Notice the 2,4, and 6 series are
shifted to the right too far.

Original issue:

Flot member

From on May 05, 2009 18:04:39
BTW, this is in FF 3.08 on WinXP using r147 patch.

Flot member

From on May 07, 2009 18:14:07
Are you sure this is not a bug in your offset code? There's no multi-series bar
offset in Flot that I know of. Flot only knows whether to center or left-justify the

Flot member

From on May 07, 2009 18:42:06
I'm using r147 without any mods. I'm only adding extra series to the dataset, and
noticed that it was shifted to the right too far when there are an even number of
series. I haven't dug into the code to figure out why r147 is calculating the offset

Flot member

From on May 25, 2009 12:05:31
Sorry for the sluggish reply.

Could you provide a minimal code example? I'm not quite sure I understand what
exactly is happening here.

Flot member

From on July 21, 2009 09:25:51
Adding multi bar support.

This is the first patch/plugin I've worked on so I am after some feedback here. I
have made 1 change throughout jquery.flot.js which I would like feedback on. I fully
expect that I have overlooked something. I have not, for instance, run horizontal
graphs or dynamically altered data.

The patch for that change is below applied to r194 from svn.

As far as the plugin goes, I'm not entirely happy but I think I have made reasonable
use of the available hooks. Is there a better way to achieve the same result?

Hover works if the patch submitted by Zollman in issue 190 is applied (can we get
this in svn when you have time).

It's obvious from the code but multi.html is setup as if it were in the examples
directory and all scripts are in the parent directory.

Any feedback greatly appreciated, I still need to do more work on stacked bars and
pie charts if I'm to get a green light!

Flot member

From on October 06, 2009 22:00:31
Sorry for the long delay. Here is the HTML test file I was using, and the patched flot
js file. View the HTML, then remove a series from the "metrics" and refresh browser.

Remove another series and refresh. With each subsequent refresh, the bars will be
centered and then left aligned.

Flot member

From on October 07, 2009 09:23:13
Nice work. Seems to align nicely for the 400x300 dimensions in your example. But when
I enlarged the graph to 800x600, the ticks seem to go out of alignment. Looks like
you are getting close to making it work, though.

Flot member

From on October 07, 2009 16:13:58
Younda: I looked at your HTML, and it doesn't look like Flot code at all. You say
you're using a patched Flot JS file? You need to take the problem to who wrote that
patch. Or try the forum/mailing list.

I'm going to let Petter Trotter's patch highjack this issue.

Flot member

From on October 08, 2009 10:40:34
Added a comment and created new patch for latest revision (205). Will update again
when I get a chance to put some more test cases together.

jquery.flot.multi.js and multi.html remain unchanged.

Flot member

From on October 08, 2009 16:03:35
Thanks Peter, this patch and works perfectly.

Flot member

From on November 04, 2009 15:58:02
Hi All, sorry for the delay updating for the latest release.

jquery.flot.multi.js remains unchanged and I've attached the latest patch for

Flot member

From on August 17, 2010 11:04:58
I've come to this thread late.
Is it now possible to render multiple series neatly in a single bar chart?
As far as I understand it, the only options for aligning multiple series in a bar chart are 'left' and 'center', which results in an overlap (attached in test.html).
Any pointers for how to render stuff so the bars appear alongside one another?
Thanks v. much!

Flot member

From on September 15, 2010 18:25:37
Peter, patch/plugin seems to work very well... good job. In the latest trunk revisions one of the hunks gets rejected, but no big deal at all to get it working.

I've setup a live demo of it in case anyone ever wants to try it and mess around to make sure it works in more situations.

Ole, this one seems like a no-brainer for inclusion in trunk!

Flot member

From on September 16, 2010 14:29:41

Hi, I would like to know whether Flot multiple bar charts support month value?

As you can see fromt the attached graph attachment, the x-axis month is repeating instead of printing unique months and 3 bars per month. I am looking for the one similar to the above attached graph multibarWithLine.gif

I appreciate your help.




Flot member

From on September 16, 2010 14:43:49
hi, how do I include the patch file jquery.flot.js.r226.patch in my script?

Flot member

From on September 16, 2010 17:23:00
@Ravivit9 - you use the "patch" program... usually in the form "patch jquery.flot.js jquery.flot.js.r226.patch" but that assumes you're using some brand of Unix. If you're using Windows, I'm not sure what most people do... Google for "patch windows" and install and use whatever that comes up with?

Flot member

From on September 17, 2010 09:46:59
hi ryleyb, thanks for your update, I am relatively new to javascript, could you please put in the actual script line for me, so that I can include it in my script.

I appreciate your reply.

Flot member

From on October 26, 2010 18:17:39
Why is this patch not integrated into a distribution yet? It's been up for a year.

Flot member

From on October 26, 2010 18:25:11
@charlie - the bright side is that you can use the plugin as is, regardless of whether its in the distribution or not.

Flot member

From on December 06, 2010 00:48:09
I wasn't able to patch automatically:

patch jquery.flot.js jquery.flot.js.r226.patch
patching file jquery.flot.js
Assertion failed: hunk, file ../patch-2.5.9-src/patch.c, line 354

This application has requested the Runtime to terminate it in an unusual way.
Please contact the application's support team for more information.

However I did manage to change the js file manually.

Thank you Peter!

Flot member

From on January 04, 2011 02:19:08
Your patch is wonderful! However.....was wondering if anyone has been able to have multi series bar AND stacked bars at the same time. I just tried to do it and it looks like multi is using the same functionality as stacked but shifting and moving down the additional bars which would have been used by stacked.

It is wonderful though that your patch doesn't break the stacked functionality. Great job!


Flot member

From on January 07, 2011 15:03:22
I'm also getting errors trying to patch the jquery.flot.js file. Does anybody has the correct .js file for me?

Flot member

From on April 30, 2011 09:19:53
Here is the patch updated for Flot 0.7.

Flot member

From wbshang on August 10, 2011 03:55:42
The patch given by fras still not works, this is the fixed one

Flot member

From on August 15, 2011 22:49:50
I took the patch given above by wbshang, and have added the ability to enable or disable the multibar feature:

To enable multiple bars, simply add:

series: { multipleBars: true } your options.

Flot member

From on October 05, 2011 10:29:50
Thanks thaman. When I use your patch, stacked bargraphs don't break, but bargraphs with lineplots are broken (line is plotted after the bars instead of centered).

I found out you will need to edit the jquery.flot.multi.js file to get that fixed:

options.multiplebars -> options.series.multipleBars (line 35 and 36)

Flot member

From on October 11, 2011 21:23:30
This style works for me with my patch:

var options = {
series: {
multipleBars: true,
bars: { barWidth: <?php echo $bar_width; ?> * 0.8 / <?php echo $num_barplots; ?>, align: 'center' },

var plotdata = [
{label: 'bar1', data: graphdata1, color: 'blue', yaxis: 1, bars: { show: true } },
{label: 'bar2', data: graphdata2, color: 'red', yaxis: 1, bars: { show: true } },
{label: 'line1', data: graphdata3, color: 'purple', yaxis: 2, lines: { show: true }, },

Let me know if you have problems.

Flot member

From on March 10, 2012 19:19:54
This does not seem working if xaxis is in time mode.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment