flowchart.js
flowchart.js copied to clipboard
adrai
Method outlined in README failing due to TypeError
Hi,
I have been trying to try out flowchart.js using this HTML file:
<html>
<head>
<script src="../js/raphael.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<script>
var diagram = flowchart.parse("the code definition");
diagram.drawSVG('diagram');
// you can also try to pass options:
diagram.drawSVG('diagram', {
'x': 0,
'y': 0,
'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',
'scale': 1,
// style symbol types
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
// even flowstate support ;-)
'flowstate' : {
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
'future' : { 'fill' : '#FFFF99'},
'request' : { 'fill' : 'blue'},
'invalid': {'fill' : '#444444'},
'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
}
})
</script>
</head>
<body>
<div id="diagram"></div>
</body>
</html>
(which is copied from http://flowchart.js.org/) but whenever I open this HTML file in my browser I get the following error in my console:
raphael.min.js:11Uncaught TypeError: Cannot read property 'x' of undefinedr._engine.create @ raphael.min.js:11r @ raphael.min.js:9FlowChart @ flowchart-latest.js:725chart.drawSVG @ flowchart-latest.js:561(anonymous function) @ layout.html:7
the raphael.min.js file I used is the exact same one used by the example page (http://flowchart.js.org/raphael-min.js) and the flowchart-latest.js I used was also that used on the example page (i.e., http://flowchart.js.org/flowchart-latest.js). My knowledge of JS is fairly limited, I am merely using flowchart.js to draw diagrams on my website.
Thanks for your time, Brenton
64-bit Google Chrome version 50.0.2661.102 (adding these extra details encase they're somehow helpful). OS: Arch Linux.
Does it work if you serve the files like here: https://github.com/adrai/flowchart.js/blob/master/example/index.html
That file actually worked. Guessing that means I will have to use those specific versions of raphael-min.js, jquery.min.js and flowchart.js?
The problem is that you reference local scripts and then just open your local html file directly in the browser without hosting it on a webserver...