Error "Cannot read Property 'x' of Undefined" Raphael.js

Asked

Viewed 1,190 times

1

I have the following error when using the browser:

Uncaught Typeerror: Cannot read Property 'x' of Undefined

and does not present me with anything. Using jsfiddle works perfectly and I have no error, using the same code. I think it’s the library’s problem.

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

Example in jsfiddle

javascript

  • breakpoints, breakpoints and breakpoints...

  • In my case, today, I had this error after an empty and/or error data set was sent to the graph. Example: The user accessing the system is not allowed to request the data in the database and display to the chart.

1 answer

1


Has two problems;

  1. You twice added Raphal.js

    <script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

    Or use the production version or Cdn.

  2. I tested it yesterday and didn’t see this mistake Uncaught TypeError: Cannot read property 'x' of undefined until calling the constructor to generate an SVG, what happens is that the page had not finished loading before running Raphal.js, you can do it in two ways:

    • Using window.onload:

      window.onload = function() {
    var paper = Raphael("canvas", 640, 480);
        paper.clear();
        paper.circle(320, 240, 60);
};

    • Using jQuery.ready:

      $(function() {
    var paper = Raphael("canvas", 640, 480);
        paper.clear();
        paper.circle(320, 240, 60);
});

Example of html code:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo simples</title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script type="text/javascript">
    window.onload = function() {
        var paper = Raphael("canvas", 640, 480);
            paper.clear();
            paper.circle(320, 240, 60);
    };
    </script>
</head>
<body>
    <div id="canvas"></div>
</body>
</html>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.