Multi series bar charts

[GoogleCodeExporter]

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 reported on code.google.com by you...@gmail.com on 5 May 2009 at 4:16

Attachments:

• mb.pdf

[GoogleCodeExporter]

BTW, this is in FF 3.08 on WinXP using r147 patch.

Original comment by you...@gmail.com on 5 May 2009 at 6:04

[GoogleCodeExporter]

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

Original comment by olau%iol...@gtempaccount.com on 7 May 2009 at 6:14

[GoogleCodeExporter]

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

Original comment by you...@gmail.com on 7 May 2009 at 6:42

[GoogleCodeExporter]

Sorry for the sluggish reply.

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

Original comment by olau%iol...@gtempaccount.com on 25 May 2009 at 12:05

[GoogleCodeExporter]

Original comment by olau%iol...@gtempaccount.com on 4 Jul 2009 at 5:07

• Changed state: Needinfo

[GoogleCodeExporter]

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!

Original comment by peter.tr...@gtempaccount.com on 21 Jul 2009 at 9:25

Attachments:

• jquery.flot.js.patch
• jquery.flot.multi.js
• multi.html

[GoogleCodeExporter]

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.

Original comment by you...@gmail.com on 6 Oct 2009 at 10:00

Attachments:

• flot.r147.min.js
• test.html

[GoogleCodeExporter]

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.

Original comment by andrewma...@gmail.com on 7 Oct 2009 at 9:23

[GoogleCodeExporter]

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.

Original comment by olau%iol...@gtempaccount.com on 7 Oct 2009 at 4:13

• Changed state: New
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

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.

Original comment by peter.tr...@gtempaccount.com on 8 Oct 2009 at 10:40

Attachments:

• jquery.flot.js.r205.patch
• jquery.flot.multi.js
• multi.html

[GoogleCodeExporter]

Thanks Peter, this patch and works perfectly.

Original comment by you...@gmail.com on 8 Oct 2009 at 4:03

Attachments:

• multibarWithLine.gif

[GoogleCodeExporter]

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
jquery.flot.js

Original comment by peter.tr...@gtempaccount.com on 4 Nov 2009 at 3:58

Attachments:

• jquery.flot.js.r226.patch

[GoogleCodeExporter]

Hi,
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!

Original comment by richards...@gmail.com on 17 Aug 2010 at 11:04

Attachments:

• test.html

[GoogleCodeExporter]

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.

http://jsfiddle.net/ryleyb/B3uGP/2/

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

Original comment by ryl...@gmail.com on 15 Sep 2010 at 6:25

[GoogleCodeExporter]

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.

Regards,
Ravivit9

CODE :
======
<script id="source" language="javascript" type="text/javascript">

$(function () {

var d1=[[1277942400000,4],[1280620800000,19],[1283299200000,2]]; 
var d2=[[1277942400000,7],[1280620800000,34],[1283299200000,7]]; 
var d3=[[1277942400000,7],[1280620800000,34],[1283299200000,7]];

xax={mode: "time", tickLength: 5, timeformat: "%b"};

    $.plot($("#placeholder"), [
        {
            data: d1,
            color: '#409628',
            label:'d1',
            bars: { show: true, align:'center', barWidth:0.3 }
        },
        {
            data: d2,
            color: '#C0504D',
            label:'d2',
            bars: { show: true, align:'center', barWidth:0.3 }
        },
        {
            data: d3,
            label:'d3',
            bars: { show: true, align:'center', barWidth:0.3 }
        }
    ],
    {
            selection: { mode: "xy" },
        grid: { hoverable: true, clickable: true },
                xaxis: xax,
                yaxis:{ min:0},
        multiplebars: true
    });
});

</script>

Thanks,
Ravivit9.

Original comment by Raviv...@googlemail.com on 16 Sep 2010 at 2:29

Attachments:

• Multi_Bar_Graph.gif

[GoogleCodeExporter]

hi, how do I include the patch file jquery.flot.js.r226.patch in my script?

Original comment by Raviv...@googlemail.com on 16 Sep 2010 at 2:43

[GoogleCodeExporter]

@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?

Original comment by ryl...@gmail.com on 16 Sep 2010 at 5:23

[GoogleCodeExporter]

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.

Original comment by Raviv...@googlemail.com on 17 Sep 2010 at 9:46

[GoogleCodeExporter]

Why is this patch not integrated into a distribution yet?  It's been up for a 
year.

Original comment by charlie....@gmail.com on 26 Oct 2010 at 6:17

[GoogleCodeExporter]

@charlie - the bright side is that you can use the plugin as is, regardless of 
whether its in the distribution or not.

Original comment by ryl...@gmail.com on 26 Oct 2010 at 6:25

[GoogleCodeExporter]

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!

Original comment by joseph...@gmail.com on 6 Dec 2010 at 12:48

[GoogleCodeExporter]

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!

Kc

Original comment by kcpirb...@gmail.com on 4 Jan 2011 at 2:19

[GoogleCodeExporter]

I'm also getting errors trying to patch the jquery.flot.js file. Does anybody 
has the correct .js file for me?

Original comment by chrisp...@gmail.com on 7 Jan 2011 at 3:03

[GoogleCodeExporter]

Here is the patch updated for Flot 0.7.

Original comment by fras...@gmail.com on 30 Apr 2011 at 9:19

Attachments:

• jquery.flot.js.0.7.patch

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

The patch given by fras still not works, this is the fixed one

Original comment by wbshang on 10 Aug 2011 at 3:55

Attachments:

• jquery.flot.js.0.7.patch

[GoogleCodeExporter]

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 }

...to your options.

Original comment by thaman...@gmail.com on 15 Aug 2011 at 10:49

Attachments:

• jquery.flot.js.0.7.DISABLEABLE.diff

[GoogleCodeExporter]

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)

Original comment by DustBug1...@gmail.com on 5 Oct 2011 at 10:29

[GoogleCodeExporter]

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.

Original comment by thaman...@gmail.com on 11 Oct 2011 at 9:23

[GoogleCodeExporter]

Hi,
This does not seem working if xaxis is in time mode.

<script id="source" language="javascript" type="text/javascript">

$(function () {

var d1=[[1277942400000,4],[1280620800000,19],[1283299200000,2]]; 
var d2=[[1277942400000,7],[1280620800000,34],[1283299200000,7]]; 
var d3=[[1277942400000,7],[1280620800000,34],[1283299200000,7]];

xax={mode: "time", tickLength: 5, timeformat: "%b"};

    $.plot($("#placeholder"), [
        {
            data: d1,
            color: '#409628',
            label:'d1',
            bars: { show: true, align:'center', barWidth:0.3 }
        },
        {
            data: d2,
            color: '#C0504D',
            label:'d2',
            bars: { show: true, align:'center', barWidth:0.3 }
        },
        {
            data: d3,
            label:'d3',
            bars: { show: true, align:'center', barWidth:0.3 }
        }
    ],
    {
            selection: { mode: "xy" },
        grid: { hoverable: true, clickable: true },
                xaxis: xax,
                yaxis:{ min:0},
        multiplebars: true
    });
});

</script>

Original comment by charas...@gmail.com on 10 Mar 2012 at 7:19

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 8 May 2012 at 12:12

• Changed title: Multi series bar charts
• Changed state: Accepted

[GoogleCodeExporter]

Can we add jquery.flow.multiple to the github repository?

Original comment by hubscher.remy on 5 Feb 2013 at 11:41

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

some one can send me a complete file?

I can't patch with 0.9 version!

email weeylink#gmail.com

Original comment by weeyl...@gmail.com on 21 Nov 2014 at 11:59