Method outlined in README failing due to TypeError

fusion809 commented 8 years ago

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

adrai commented 8 years ago

Which browser are you using?

fusion809 commented 8 years ago

64-bit Google Chrome version 50.0.2661.102 (adding these extra details encase they're somehow helpful). OS: Arch Linux.

adrai commented 8 years ago

Does it work if you serve the files like here: https://github.com/adrai/flowchart.js/blob/master/example/index.html

fusion809 commented 8 years ago

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?

adrai commented 8 years ago

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...

adrai / flowchart.js

Method outlined in README failing due to TypeError #82