1

Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so.

I am studying the first example offered here:

reached from this page

Three files are offered -- HTML, CSS, JavaScript -- along with the impression that these three will, when loaded into my browser, create a running example.

But the HTML seems to be incomplete, possibly in two ways:

  1. the JavaScript on the jsbin page needs to be included via a script tag
  2. the variable cy is not defined anywhere that I can see, leading to this error message in the console: Object #cy has no method cytoscape

A stack overflow search on that error message points back to the very fine cy.js documentation, but alas, I am still in the dark: where do I initialize the "cy" object?

And best of all, where can I find a complete working example, useful for such a raw beginner as myself, something I can pore over and study until I begin to grasp the logic of this style of programming, and make use of this very fine library?

Thanks!

Shiva
  • 6,677
  • 4
  • 36
  • 61
paul shannon
  • 355
  • 5
  • 15

2 Answers2

2

I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.

  1. Yes, if you're referring to the following tag:

    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

    This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.

  2. The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:

    <div id="cy"></div>

    Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.

I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.

gcpdev
  • 442
  • 6
  • 20
  • Thanks. These suggestions and pointers are helpful, and I will pursue them. But perhaps, in addition, some fully working, complete examples -- maybe just one, of the "hello world" model -- with all html, css and js included, and tested, will do no harm, would not take much time to create, and would quite possibly do some good. I, for one, would be grateful! – paul shannon Feb 09 '14 at 18:53
  • I couldn't understand what you mean with _fully working, complete examples_, but I have [this tool](http://jsfiddle.net/AyTg9/) that I've been working for some months for my master thesis. It's an open source project not finished yet, and maybe you won't understand all the code behind it (and unfortunately I'm now too busy to help you get it all). – gcpdev Feb 09 '14 at 21:27
  • "fully working, complete example": imagine a single html file, with javascript and css and html all contained within it, with only two "script src=" lines (one for jquery, one for cytoscape.js). this self-contained file would be a complete working example: load it into your browser, see a simple network appear. Sorry if I am being slow on the uptake. Does this description make any more sense? thanks, Paul – paul shannon Feb 09 '14 at 23:19
  • 1
    All right, then [this](http://codio.io/gpublio/GAT-HTML5/single.html) is the best I could do trying to help you. Anyway, note that is just a matter of symbolism: although this is a single working example (I just imported tree files, jQuery & cytoscape.js libraries and Cytoscape's edgehandles, wich provides the way of adding edges easily), the – gcpdev Feb 10 '14 at 00:22
  • Perfect! thank you very much. I will study this, and jquery course. I am most grateful! – paul shannon Feb 10 '14 at 01:45
  • I've wrapped the JS in 'on document ready' for the examples, but otherwise, they have everything that would be in a standalone demo. JSBin code doesn't need to wait for 'ready' for obvious reasons. – maxkfranz Feb 10 '14 at 14:56
2

Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.

The file is called jsbin.ravecala.1.html. Open with

firefox jsbin.ravecala.1.html

(I also struggled a while before realizing this.)

tom4everitt
  • 581
  • 4
  • 6