Support for dashed lines

[GoogleCodeExporter]

Dashed lines should be supported
An example is here
http://demo.quietlyscheming.com/dashes/index.html

Original issue reported on code.google.com by weiw...@gmail.com on 7 Oct 2008 at 4:36

[GoogleCodeExporter]

Sorry, it should be an enhancement rather than a defect. I didn't figure out 
how to 
change the type

Original comment by weiw...@gmail.com on 7 Oct 2008 at 4:37

[GoogleCodeExporter]

Here is my revised version with dashed line support, against flot 0.5 (revision 
95, I 
think).
Codes ported from http://www.quietlyscheming.com/blog/charts/dashed-lines/

And an example html, it should work if placed in the "example" directory of 
flot 
release package.

Original comment by weiw...@gmail.com on 7 Oct 2008 at 4:41

Attachments:

• jquery.flot.js
• dashed-lines.html

[GoogleCodeExporter]

I had a quick look and although I'm a little bit sceptical as to the usefulness 
(I
personally think stipples are useful for black/white paper but not much else), 
the
overall idea seems fine. I think there are two things missing.

First the API - how are people supposed to setup the dashes? I need a couple of
examples to put into the docs. I also think it would be helpful to include a 
couple
of prepackaged ones that look great, maybe specified as strings, e.g. like
dashPattern: "dotted". Otherwise I don't think anyone is going to use the 
feature and
then we might as well leave it out.

Second. What about the legend? I think we need to have a solution for that too.

Oh, another thing is speed. Would you please try measuring how much slower 
drawing
becomes for a moderately complex graph, say the example with the visitors, both 
in
Firefox and IE. If you look in the $.plot = function(target, data, options) { 
... },
there's a bit of commented code for timing the plot, if you uncomment it and 
move the
first line (var t0 = new Date();) one line up, you should get a timing out.

Finally it would be helpful if you can make a patch against the SVN release, by 
far
the easiest way to do that is to check out the source, make your changes in the
jquery.flot.js file in there and do the diff with SVN (if you're on Windows, you
could try Tortoise SVN). There are instructions here:

http://code.google.com/p/flot/source/checkout

Enhancement/defect: the issue tracker is unfortunately a bit primitive, someone
should file an enhancement report on the code.google.com project. Oh wait. :-)

Original comment by olau%iol...@gtempaccount.com on 8 Oct 2008 at 12:31

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Thanks, I'll explain a bit here and follow your words later.

The initial motivation here is because I'm using flot in the product of my 
company 
and some guy here is color blind... so dashed line is a feature he really wants.

Docs, legend support and preset dash patterns are reasonable.

It is somewhat slow under IE. I'll show some profiling data.

By the way, should I make the patch against the latest revision? or revision 95 
which 
is released as version 0.5?

Original comment by weiw...@gmail.com on 8 Oct 2008 at 1:50

[GoogleCodeExporter]

Ah, color blindness, I hadn't thought of that.

I prefer patch against latest revision.

Original comment by olau%iol...@gtempaccount.com on 9 Oct 2008 at 11:36

[GoogleCodeExporter]

I'd love to see this as well.  On the charts I'm working on, I have a group of
devices with multiple statistics.  I'd like to have the first set of statistics 
have
a solid line, and the second have a dashed, and a third dotted... and so on. 
That
will provide an additional indicator in addition to just color.

Original comment by seas...@gmail.com on 26 Nov 2008 at 7:52

[GoogleCodeExporter]

Hi, sorry for the long time reply
1. I've added some built-in dash pattern names: "dashdot", "dense" and "sparse"
2. Legend is indeed a problem, I can't find a nice way to deal with it.
3. About the performance, I did some rough tests on Windows XP, results below 
(in
milliseconds). Unfortunately, on IE7 it's very slow, actually it causes IE7 
hang for
a few seconds.
        No Dash     dashdot     dense       sparse
Firefox 3.0.5     75          154       203      114
IE 7.0        157         1672          2547             1031

Considering the legend problem and IE performance issue, you could decide 
whether to
merge this patch into the trunk with some warnings, or leave it here.

Patch file against revision 131 and a demo page is attached with this comment.

Original comment by weiw...@gmail.com on 24 Jan 2009 at 5:53

Attachments:

• dash.patch
• dash.html

[GoogleCodeExporter]

This patch was great.  It is exactly what I was looking for.  We have 
accessibility
standards that require plots such as these to be readable by people with vision
impairment. 

I am also interested in the legend, and will be sure to post back if I am able 
to
find a solution.

Original comment by compensa...@gmail.com on 18 Feb 2009 at 11:32

[GoogleCodeExporter]

I haven't looked further into this, but I did come across a discussion on 
dashed line
support in the canvas in the HTML5 spec group mailing list archive. Maybe it 
would be
a good idea to lobby for built-in canvas support for stipples on the list:

  http://www.whatwg.org/mailing-list#specs

Here's a link to the discussion I came across:

  http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2007-May/011200.html

Original comment by olau%iol...@gtempaccount.com on 20 Feb 2009 at 4:23

[GoogleCodeExporter]

Dig this patch. I found a defect though. I don't have time to look at it right 
now,
but I will tomorrow. Meanwhile, if you guys know this script like the back of 
your
hand, try and give it a shot. I attached an html file that demonstrates it. I 
think a
"draw dashed lines" state is stuck on true and the bottom border of the graph 
becomes
dashed! Drop this html file into the examples directory and patch revision 131 
flot
with the path attached to comment 7 (see above) to see the bug.  

Original comment by aaronab...@gmail.com on 24 Apr 2009 at 11:35

Attachments:

• bug_example.html

[GoogleCodeExporter]

Ok, I did a little research. No dashing state is left on. What's happening is 
that
the shadows are being drawn too far from the graph line and they over lap the 
grid
border. Since that has already been drawn, the shadow size draws a light shade 
which
looks like white and therefore, I thought the border was being redrawn and 
dashed.
You can see in my example html file how the shadow size is messed up for the 
dashed
lines in my graph, but the regular lines are fine. This is probably a quick fix 
and I
have my work-around for now. Again... flot is really great and adding dashed 
lines
are really helpful!! Btw, I would be interested in helping maintain flot if you 
need
any help.

Original comment by aaronab...@gmail.com on 24 Apr 2009 at 12:02

[GoogleCodeExporter]

Hello, is there a patch for the last version of flot (0.6)??

Original comment by riche.ol...@gmail.com on 10 Mar 2010 at 7:17

[GoogleCodeExporter]

I think at this point, it probably makes sense to move this to a plugin instead,
given that canvas, as far as I know, still doesn't support dashes natively. I'll
leave the bug open for now, but unless somebody can convince me otherwise, only 
until
somebody has grabbed the code and released a plugin.

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

[GoogleCodeExporter]

Did anyone release a plugin for this?  If not, I could post mine.

I ran into the legend issue as well.  It's not in this plugin, but I went with 
distinct "icons" for bars, points, and solid/dashed/dotted lines.  Did anyone 
come up with another solution?

Original comment by michael.hixson@gmail.com on 22 Jun 2010 at 4:18

[GoogleCodeExporter]

Looks the main discussion is fairly old, do you plan on adding support for 
dashed lines anytime soon?

Original comment by ToniN...@gmail.com on 25 Jun 2010 at 2:01

[GoogleCodeExporter]

Well, I just added the dash-line support to flot v0.6 in case anyone needs it. 
It's poorly tested but seems to work.

Original comment by ToniN...@gmail.com on 25 Jun 2010 at 3:29

Attachments:

• jquery.flot.js
• dashed-lines.html

[GoogleCodeExporter]

I guess I'll post my plugin version here too... don't feel like making a Google 
code page for it or hosting it somewhere.

Original comment by michael.hixson@gmail.com on 29 Jun 2010 at 8:09

Attachments:

• jquery.flot.dashes.js
• dashes.html

[GoogleCodeExporter]

Thank you for your plugins! Very useful.

Original comment by ADOConne...@gmail.com on 4 Sep 2010 at 10:55

[GoogleCodeExporter]

Issue 283 has been merged into this issue.

Original comment by olau%iol...@gtempaccount.com on 11 Mar 2011 at 5:06

[GoogleCodeExporter]

I'm happy to see a plugin has arrived. 283 has some code too. It's sad we 
haven't solved the legend problem yet, but it's a bit of a tough one.

Original comment by olau%iol...@gtempaccount.com on 11 Mar 2011 at 5:09

[GoogleCodeExporter]

I'd post the code I wrote for our legend, which had separate icons for points, 
lines, dashes, dots, and bars, if it weren't so embarrassing.  For instance, 
our points icon is an 8x8 <table> of 1x1 pixel cells with transparency values I 
grabbed from GIMP after drawing a circle in it.  

One issue with the legend is that plugins would need a hook to customize their 
icon.  Although I wrote that plugin (or rather, I pressed CTRL+C then CTRL+V, 
wrote a few lines of code and called it a plugin), I ended up not using it in 
production, instead inserting dashed line support into the flot core itself, 
because of the legend issue.

Original comment by michael.hixson@gmail.com on 12 Mar 2011 at 7:00

[GoogleCodeExporter]

any dashed-line plugin that works with 0.7 too? ...

Original comment by naama...@gmail.com on 14 Apr 2011 at 8:12

[GoogleCodeExporter]

Hi Michael, I am interested in using the plug-in you posted in Comment #17 on 
Jun 29, 2010. Before I do that, I like to understand the details, such as 
originality, copyrights and license, of your code.  Is it possible that you 
contact me directly?  Thanks.

Original comment by jackfeng@us.ibm.com on 16 May 2011 at 10:15

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

How can I combine solid lines with dashed lines?

Original comment by zdarsky....@gmail.com on 26 May 2011 at 1:16

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

To combine solid lines with dashed lines, I added the dashes property to the 
data series itself, instead of the options. Using Flot 0.7 with the 
jquery.flot.dashes.js file posted on June 29, 2010 above.

Here is the code to create the attached chart:

<script language="javascript" type="text/javascript" 
src="flot/jquery.flot.dashes.js"></script>
...
...
    var data = [
        {label: "Series1",data: [[0,200],[5,110],[10,230],[15,298],[20,196]],dashes:{show:true}  }, 
        {label: "Series2",data: [[0,100],[5,60],[10,130],[15,198],[20,96]], dashes:{show:false}   },    
        {label: "Series3", data: [ [0,50],[5,220],[10,230],[15,98],[20,75]] ,dashes:{show:true}  },
        {label: "Series4", data: [ [0,91],[5,41],[10,174],[15,91],[20,175]] ,dashes:{show:false}  }
        ];

    var options = {
    };

    $.plot($("#placeholder"), data, options);

Original comment by openid.t...@gmail.com on 17 Jun 2011 at 4:37

Attachments:

• Flot-Combined-Dash-Solid-Lines.PNG

[GoogleCodeExporter]

Hi there, any news about legend working with dashed line ? Really usefull for 
balck and white printers !

Original comment by mathieuc...@gmail.com on 24 Nov 2011 at 11:30

[GoogleCodeExporter]

The plugin by Michael Hixson posted on Jun 29, 2010 above works great for 
static plots. But if you dynamically add new data to the plot, then each dash 
line is being drawn multiple times (stacked), which negatively affects the 
plot's appearance.

The problem lies in the way the plugin hooks to the flot core. It acts by 
registering a hook to 'processData', which then registers a hook to 'draw'. 
When some data is added dynamically, for example through plot.setData(...) 
function, the 'processData' hook gets executed once again and registers 
*another* 'draw' hook. So when the plot gets redrawn, dashed lines get drawn X 
times - once by each registered 'draw' hook.

I fixed this problem by modifying the plugin to register only a 'drawSeries' 
hook instead. Apart from fixing the issue, it also seems more natural for the 
code structure to draw dashed lines this way.

Anyways, thanks Michael for this plugin, it is very useful :)

PS: I also wrote a piece of code to draw a sample of the dashed line in the 
legend, but it modifies the flot core. I may post it in case someone is 
interested.

Original comment by pbetk...@gmail.com on 16 Dec 2011 at 1:10

Attachments:

• jquery.flot.dashes.js

[GoogleCodeExporter]

Yes, it would be really nice if you could post that code for drawing a sample 
of the dashed line in the legend. Thanks!

Original comment by m...@bjoernschwentker.de on 1 Jan 2012 at 11:35

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 7 May 2012 at 11:59

• Changed state: Accepted

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Would either michael.h...@gmail.com or pbet...@gmail.com be willing to publicly 
clarify the license on their code? Apache? Commercial use?

Original comment by dfran...@gmail.com on 15 Jun 2012 at 6:10

[GoogleCodeExporter]

Is there a licensed way to get dashed lines in flot?  I can't believe there's a 
question about whether dashes are useful.

Original comment by jay.rog...@gmail.com on 9 Mar 2013 at 12:42

[GoogleCodeExporter]

jquery.flot.dashes.js is very useful plugin.
But..., I set option parameter below.
var options={
  lines: {
    show: true
  }
  ,points:{
    show:true
  }
}

dashed line was not drawed.

Help me!

Original comment by sinh...@gmail.com on 25 Apr 2013 at 1:37

[GoogleCodeExporter]

For those of you struggling to get it working, I've created a jsfiddle where it 
works.

http://jsfiddle.net/pmorch/bJwY8/1/

It uses the plugin version from comment #32 and seems to work just fine with 
0.8.1

Original comment by pmo...@gmail.com on 8 Aug 2013 at 5:22

[GoogleCodeExporter]

I have the dashes working properly except I can't seem to get the plothover 
function to fire with them when I mouseover a point. Is there a trick to doing 
this?

Original comment by eflowbe...@gmail.com on 9 Sep 2013 at 5:44

[GoogleCodeExporter]

Dear Michael Hixson, many thanks for jquery.flot.dashes.js!
One question: if I modify line 15 in jsfiddle to ('steps' added):
{ label: "sin(x)",  data: d1, dashes: { show: true, steps:true }},
it doesn't use steps like in solid lines.
Am I missing something or it is not implemented ?
How can I use steps with jquery.flot.dashes.js ?
Thank you

Original comment by fenyvesi...@gmail.com on 30 Sep 2013 at 11:45

[GoogleCodeExporter]

Thanks a lot for this patch, it works perfectly for me with flot 0.8.1

Original comment by jb.vinc...@gmail.com on 28 Oct 2013 at 1:57

[GoogleCodeExporter]

Thanks for the plugin - it was very easy to incorporate. I also notice the 
hover issue raised in comment #40.  Anyone have any ideas?

Original comment by dhm3...@gmail.com on 6 Nov 2013 at 5:10

[GoogleCodeExporter]

Regarding the hover issue, there's a function called "findNearbyItem" in 
jquery.flot.js that performs the search only if the plot is showing lines, 
points or bars. If you only have "dashes" showing, then it won't perform the 
search.

Two choices:
- Modify the jquery.flot.js file in the following line:
    if (s.lines.show || s.points.show)
  to something like 
    if (s.lines.show || s.points.show || s.dashes.show)
- Show points with 0 radius in the series you show dashes:
  (from the example in comment #41)
  { label: "sin(x)",  data: d1, dashes: { show: true, steps:true }, points: {show: true, radius:0 }}

I'm using the latter.

Hope this helps.

Original comment by fermarti...@gmail.com on 16 Dec 2013 at 5:50

[GoogleCodeExporter]

If it doesn't work just check lines.show option. It should be false
{
  lines: {show: false}
  dashes:{show:true}
}

Original comment by aovchinn...@rtcsoftware.ru on 2 Apr 2015 at 1:07