example not working

[xiaodaigh]

I get the following error

Uncaught TypeError: Cannot set property 'direction' of undefined flowchart-1.2.2.min.js:5
n flowchart-1.2.2.min.js:5
(anonymous function) (index):273

[sumitraghav]

Hi xiaodaigh,

I am also getting same error. Can you please tell me how you resolved that issue?

Thanks!

[adrai]

@sumitraghav Do you use the latest version?

[sumitraghav]

Hi adrai,

Thanks for the reply
Yeh I am using the latest version that is flowchart-1.2.4.js
I found the error , actually i miss the \n after cond step "'or No?\n:>http://www.google.com\n' + " so it was not reading io step.
now it is working fine.

But now the problem is, it is not redirecting to the given url.
Like you did , when click on start, it redirect to google.com.
How could I do this.

Thanks

[adrai]

Is the \n after www.google.com really needed? I think this is the problem...

[sumitraghav]

YEH,

when i add \n after the link, my problem resolved. I guess chart object read all the lines and and if in do not use \n it doesn't read io step as it doesn't found it in new line.

May be my assumption but my problem is resolved when i did this. I found this by debugging the flowchart javascript .

Now my question is
it is not redirecting to the given url.
Like you did , when click on start, it redirect to google.com.
How could I do this.

[adrai]

Can you paste me your whole example "code" (description of flowchart)?

[sumitraghav]

I am using this code

<script> window.onload = function () { var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' + 'e=>end:>http://www.google.com\n' + 'op1=>operation: My Operation1\n' + 'sub1=>subroutine: My Subroutine1\n' + 'cond1=>condition: Yes \n' + 'or No 1?\n:>http://www.google.com\n' + 'op2=>operation: My Operation2\n' + 'sub2=>subroutine: My Subroutine2\n' + 'cond2=>condition: Yes \n' + 'or No 2?\n:>http://www.google.com\n' + 'io=>inputoutput: catch something...\n' + '' + 'st->op1->cond1\n' + 'cond1(yes, right)->op2->cond2\n' + 'cond1(no)->op1\n' + 'cond2(yes, right)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right) 'cond2(no)->op2'); diagram.drawSVG('diagram'); // you can also try to pass options: diagram.drawSVG('diagram', { 'line-width': 3, 'line-length': 50, 'text-margin': 10, 'font-size': 14, 'font-color': 'black', 'line-color': 'black', 'element-color': 'black', 'fill': 'white', 'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block' }); }; </script>

And i include raphael.js and flowchart.js both latest.

[adrai]

this? ;-)

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1->op1

[sumitraghav]

how could i post the code?

[sumitraghav]

Yeh I am trying this one exactly in one one my code

[sumitraghav]

that is my code in other example.

window.onload = function () {
var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
'e=>end:>http://www.google.com\n' +
'op1=>operation: My Operation1\n' +
'sub1=>subroutine: My Subroutine1\n' +
'cond1=>condition: Yes \n' +
'or No 1?\n:>http://www.google.com\n' +
'op2=>operation: My Operation2\n' +
'sub2=>subroutine: My Subroutine2\n' +
'cond2=>condition: Yes \n' +
'or No 2?\n:>http://www.google.com\n' +
'io=>inputoutput: catch something...\n' +
'' +
'st->op1->cond1\n' +
'cond1(yes, right)->op2->cond2\n' +
'cond1(no)->op1\n' +
'cond2(yes, right)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
'cond2(no)->op2');
diagram.drawSVG('diagram');

// you can also try to pass options:

diagram.drawSVG('diagram', {
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block'
});
};

[adrai]

ok, seams to be a bug in raphael... DmitryBaranovskiy/raphael#784

[sumitraghav]

Can u plz tell me.. how could I resolve this.

In the link u gave, they are using different format and different object i guess.

Can u plz give me the suitable code.

[adrai]

At the moment you need an older version of raphael or simply wait until the new raphael version is released.

[sumitraghav]

thanks a lott adrai,

will try that option.... can u plz give me the link for older version . Because there is only latest version is available on the website i think.

[adrai]

http://adrai.github.io/flowchart.js/raphael-min.js ;-)

[sumitraghav]

It is working now.
Thanks

One more thing . Can we pass data through JSON format into diagram.parse("");
Is there any particular format that we only pass set of rules, steps and redirection method/url or we need to form the string only?

[adrai]

At the moment it's the string only, but pull requests are welcome!

[sumitraghav]

Ohh cool,

Can we pass String through JSON ??

[adrai]

What do you mean with String through JSON? Can you make an example?

[sumitraghav]

Actually I want the thing that I ask you b4. But now I ll work llok into string format.
Left potion is not working in it. See when I define left direction in condition(cond(Yes, Left)->nxt op), no change in drawing format.

Can we change it according to our need. For example I want to draw it in center position and draggable.
I want something like this

http://raphaeljs.com/graffle.html

Thanks!

[adrai]

short feedback:

1. the direction works only for bottom and right (left and top not supported)
2. I have not so much time at the moment to make bigger extensions(refactorings) for this library, but if you want you can do a pull request and I will review it, ok?