Turn off bar outlines

[GoogleCodeExporter]

Hi,

I'm currently trying to adopt flot for a product I'm working on, I am using 
the stack plugin to make a vertical stacked column chart. Each column 
represents a contiguous time period and so each column is placed right up 
against each other. The problem here is that the outlines for the columns 
makes the chart look wrong. 

To rectify this I have made a small modification to the flot core script 
adding a parameter 'drawOutline' to the bars options - the default being 
true. I further modified 'drawBar' method to not draw the bar outline with 
this option set to false.

Do you think this is the type of modification that merits being added to 
the codebase?

Colin

Original issue reported on code.google.com by colinrya...@gmail.com on 3 Nov 2009 at 9:24

Attachments:

• jquery.flot_fork.js
• with_outline.JPG
• without_outline.JPG

[GoogleCodeExporter]

Did you try setting the line width to 0? I think that's the easiest way to fix 
it. We
might need to patch Flot to support it if it doesn't work, though.

Original comment by olau%iol...@gtempaccount.com on 4 Nov 2009 at 6:12

[GoogleCodeExporter]

Hi,

Setting line width works only on FireFox but not chrome, safari or IE :-(

Original comment by colinrya...@gmail.com on 19 Nov 2009 at 3:28

[GoogleCodeExporter]

Hi,

I have the same issue with outlines doesn't disappear on Safari and Chrome even 
if
line width was set to 0. Firefox and IE8. Please let me know if you managed to 
fix it.

Original comment by myrosl...@gmail.com on 27 Jan 2010 at 8:11

[GoogleCodeExporter]

Hello,

In this page there's a canvas example with linewidth from 0 to 10 (temoraly)
http://tierra.hyds.es/~jordi.castells/canvas_test.php

You can try to render it with webkit navigators (chrome and Safari) and you'll 
see
that linewidth=0 works different in Chrome-Safari and Firefox. The first ones 
draw a
line width=1 instad of width=0 => invisible.

So this is some browser issue, not a flot problem.

Anyway, I modified flot to check for this situation:

The interesting function changed is DrawBar with a new parameter barLineWidth

function drawBar(x, y, b, barLeft, barRight, offset, fillStyleCallback, axisx, 
axisy,
c, horizontal, barLineWidth)

Inside the function simply need to change:

  if ((drawLeft || drawRight || drawTop || drawBottom)) ....

to

  if ((drawLeft || drawRight || drawTop || drawBottom) && barLineWidth>0)

Now, if you define linewidth to 0, flot ignores it and simply does not draw 
outlines
(equivalent to drawing a linewidth=0 line), this works correctly for this issue 
and
tested on firefox,safari and chrome

NOTE: Every call to DrawBar needs to add a parameter, there's a comment with my
surname (Castells) next to every changed line (if you wanna take a look)

Hope that this helps

Salut!

Original comment by jordi.ks...@gmail.com on 26 Mar 2010 at 9:18

Attachments:

• jquery.flot_barlinewidth.js

[GoogleCodeExporter]

I've committed the necessary changes based on the fix by Jordi. Thanks to all 
of you!

Original comment by olau%iol...@gtempaccount.com on 26 Mar 2010 at 11:27

• Changed state: Fixed

[GoogleCodeExporter]

For those stuck w/ an version of flot < 0.7, you can set lineWidth to 0.001.

Source: 
http://groups.google.com/group/flot-graphs/browse_thread/thread/d0f2312313a27399

Original comment by russ.sh...@gmail.com on 27 Apr 2011 at 8:59