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

Vanilla JS Example #14

Closed
JSONRice opened this issue Aug 19, 2016 · 2 comments
Closed

Vanilla JS Example #14

JSONRice opened this issue Aug 19, 2016 · 2 comments

Comments

@JSONRice
Copy link
Contributor

JSONRice commented Aug 19, 2016 •
edited

@jrsquared I'm making progress since the latest webpack.config.js update you released a few days ago. Also your response to issue 12 was cut short. I'm not sure what happened but I'm seeing:

...
I am going to close this bug since vizceral is outputting transpiled javascript. If you are still having trouble using vizceral with a

I would really like to know what the last part of that sentence said! 👍

I realized that my scripts were loading before the page finished loading. I have corrected this and have:

<html>
  <head>
    <script src="./lib/vizceral_ecs6.js"></script>
    <script>
      function run( ) {
        var viz = window.Vizceral(document.getElementById('test'));
        viz.updateData({name: 'us-west-2', renderer: 'global', nodes: [{name: 'a'},{name: 'b'}], connections: [{source: 'a', target: 'b'}]});
        viz.setView();
     }
  }
  </script>
  </head>
  <body onload='javascript:run( )'>
    <canvas id='test'></canvas>
  </body>
</html>

In Firefox I'm seeing Vizceral is attached to the window:

Object{ default=Vizceral }

That's promising!

If I expand this object I'm seeing a default property such that:

default -> Vizceral(canvas)

But the error remains:

TypeError: window.Vizceral is not a function

You can certainly ignore or drop this issue, as it's more of a request but if you have time please provide an example of importing Vizceral(somecanvas) via the <script> tag. Ideally the example could be based off of what is already in this post as this is a trivial snippet of html and JS. I'm super close and I'm confident others would benefit from seeing this example, especially for those of us running in older browsers. Thank you.
@jrsquared
Copy link
Contributor

Ah, yep, fixed my comment on the previous issue. I just said to open a new issue, which you did!

Very close! A few issues:

  • The actual constructor is Vizceral.default.
  • It's a constructor, so you have to call new Vizceral.default.
  • maxVolume is required for graphs
  • You need to call viz.animate() to load and start the animation

One issue as far as graph layout goes on my end: I still expect there to be one entry node, and that entry node to be named 'INTERNET'. That is hard coded in a few places, and at some point, I think this expectation should be removed. (FWIW, this requirement is documented in DATAFORMATS.md)

All that being said, here's a working example (at least in Firefox 48):

<html>
  <head>
    <script src="./lib/vizceral_ecs6.js"></script>
    <script>
      function run( ) {
        var viz = new Vizceral.default(document.getElementById('test'));
        viz.updateData({name: 'us-west-2', renderer: 'global', nodes: [{name: 'INTERNET'},{name: 'b'}], connections: [{source: 'INTERNET', target: 'b'}], maxVolume: 100});
        viz.setView();
        viz.animate();
     }
  </script>
  </head>
  <body onload='javascript:run( )'>
    <canvas id='test'></canvas>
  </body>
</html>

@JSONRice
Copy link
Contributor Author

@jrsquared Eureka it works! Thank you!

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
2 participants
@jrsquared @JSONRice