Dashstyle is not working

[GoogleCodeExporter]

Hi,

I'm trying to create connections that use a dashed line. Reading the 
documentation, I found that it should be an easy task that could be done using 
dashstyle parameter of the paintStyle property; however, it is not working for 
me. I have tried different options for the value of the dashstyle parameter, 
including the following:
jsPlumb.connect({ source:e1, target:e2, paintStyle:{ dashstyle:"2, 2" } });
jsPlumb.connect({ source:e1, target:e3, paintStyle:{ dashstyle:[2, 2] } });
jsPlumb.connect({ source:e1, target:e4, paintStyle:{ dashstyle:"2 2" } });
However, none of these options gave the expected result, that is, the 
connection is drawn as a solid, not as a dashed line.

I've also tried using the other parameter mentioned in the documentation -  
stroke-dasharray - but Firebug reports  an error as it is not recognizing this 
parameter.

I've attached a very simple example that illustrates this problem.

Any help would be much appreciated!

Jelena

Original issue reported on code.google.com by jel...@gmail.com on 17 Oct 2011 at 7:19

Attachments:

• [simple test.zip](https://storage.googleapis.com/google-code-attachments/jsplumb/issue-137/comment-0/simple test.zip)

[GoogleCodeExporter]

thanks for the example code. i've put together this jsFiddle to help you:

http://jsfiddle.net/sporritt/zYqwQ/

in the code you sent me, you had jsPlumb.setRenderMode(jsPlumb.CANVAS).  even 
without the few bits and pieces I found, this would not work: canvas does not 
support the dash style.  you should force jsPlumb to use jsPlumb.SVG for render 
mode (in IE < 9, it will automatically use VML regardless of what you ask for, 
so the dashstyle will work there).

things to note about the jsfiddle:

- if you supply a paintStyle object to a jsPlumb.connect call, you need to 
supply a strokeStyle and lineWidth value inside of it.  'dashstyle' on its own 
actually did result in an SVG element being created, but it's "stroke" was set 
to none and was therefore invisible.

- the 'connectorStyle' parameter in an Endpoint definition overrides any 
'paintStyle'  parameters you pass to jsPlumb.connect. so in that example, if 
you uncomment connectorStyle, you will see all of your connections get that 
dashed, 7px grey line.

- there are a few different examples of the dashstyle format in the jsfiddle.  
for a reference on the format of this, look at the VML spec (search for 
'dashstyle' in this page):  http://www.w3.org/TR/NOTE-VML  

hope this helps.  i think it's fair to say that this stuff is not very well 
documented in the jsPlumb docs!  i'll make a note to improve the docs for the 
next release.

Original comment by simon.po...@gmail.com on 17 Oct 2011 at 8:06

[GoogleCodeExporter]

Thanks a lot! It helps a lot!

Original comment by jel...@gmail.com on 17 Oct 2011 at 7:07

[GoogleCodeExporter]

cool.  closing this out then.

Original comment by simon.po...@gmail.com on 17 Oct 2011 at 10:24

• Changed state: Invalid