Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught TypeError: Cannot read property 'width' of undefined #365

Closed
brooksbp opened this issue Jun 17, 2014 · 7 comments
Closed

Uncaught TypeError: Cannot read property 'width' of undefined #365

brooksbp opened this issue Jun 17, 2014 · 7 comments

Comments

@brooksbp
Copy link

With the latest release c3 release (download link from main website) and d3.v3.min.js

Google Chrome 36.0.1985.49 beta

I am surprised this doesn't work right out of the box. Am I doing something wrong?

<!DOCTYPE html>
<html>
<head>
  <link href="c3.css" rel="stylesheet" type="text/css">

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="c3.js"></script>

  <script>
    var chart = c3.generate({
     data: {
       columns: [
         ['data1', 30, 200, 100, 400, 150, 250],
         ['data2', 50, 20, 10, 40, 15, 25]
       ]
     }
   });
  </script>
</head>
<body>

  <div class='chart'>
  <div id="chart"></div>
  </div>

</body>
</html>
@lilasquared
Copy link

Don't ask my why but I played around with your simple example here and this made it work..http://jsfiddle.net/3ryU3/6/. Definitely an interesting result.

@brooksbp
Copy link
Author

If I move the JavaScript to the bottom of 'body' tag it works. Interesting... Can someone please comment as to why this is necessary before I close this issue? Thanks!

@patrickglass
Copy link

Browsers generally execute javascript as soon as it is encountered. This means that this code will execute before the DOM has been parsed the chart div. This will nearly always cause issues.

Having script run ones the DOM is ready is so common that jQuery created some shorthand to wrap your code snippets in.

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="c3.js"></script>
<script>
$(function() {
  console.log( "ready!" );
  var chart = c3.generate({
     data: {
       columns: [
         ['data1', 30, 200, 100, 400, 150, 250],
         ['data2', 50, 20, 10, 40, 15, 25]
       ]
     }
   });
});
</script>

This can now be placed anywhere since it wont be run until the document is ready. Below is the pure javascript way of things.

window.onload = function

@brooksbp
Copy link
Author

@patrickglass Thanks!

@DevInder1
Copy link

this error mainly occurs when your script function load first and then html body so solution is to write script function at the bottom of body so that i will be able to find div id and bind graph to that it

@sagar232000
Copy link

try this way to solve problem:
use script inside the body tag like this:
Capture

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@brooksbp @patrickglass @lilasquared @DevInder1 @sagar232000 and others