0

I need to implement a particular network graph in javascript. I've looked at InfoVis Toolkit and Protovis, but I'd have to implement a custom layout for them and a lot of custom code. I'm not sure they add much value. This widget needs to be super efficient as it will go on many highly visited webpages, I don't want the widget slowing anything down.

The nodes of this graph are html-rich. Dropdowns, input elements, popups, etc. So div's make a lot of sense for each node. I could simply create the divs in javascript using AJAX to read the data from my server. Implement the layout mechanism in javascript and animate everything when adding/updating/deleting nodes through jQuery.

The only thing I can think of preventing me from only using jQuery is the connections between the nodes. How do I draw them? I might be able to use something like Raphael underneath the nodes and coordinate between the node positions and Raphael, but after very briefly looking at Raphael, it looks tricky.

Is there another simpler way to draw the connections between the nodes? IE support is important at least for IE8. Preferably the lines can be curved and patterned (dotted lines, double lines, etc) to represent different types of connections.

UPDATE: I don't mind paying for a solution, like mxGraph which was suggested. The solution so far, which exists only in mind, is to create transparent PNG images of the various connections. Since the nodes in my situation are in somewhat of a grid, there's a maximum number of different connection images (will be pretty large though) and since they're transparent, they can be layered on top of each other. Make sense?

Improve this question

2 Answers 2

Reset to default
2

This is exactly what mxGraph is designed to do (I do work on the product), but the question is whether you want an open source solution or not. mxGraph can be used under a free academic license if that is the intended usage.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Looks interesting, expensive... but if it does what I need, certainly worth it. I don't care whether it's open source or not if the quality is good. I'll play with this a little.
1

You could do the entire graph with RaphaelJS rather than trying to just do the connections with it, that should be a lot simpler than trying to only use it for the connections. A couple of the demos are similar to what you describe (though, being demos, a lot simpler). This one shows dragging nodes around, with their connections staying attached. This one shows mouseover integration. Doesn't look like any of the main demos features showing a popup in response to a click, but the concept is there.

The Raphael objects are DOM elements, so there's no problem with attaching handlers to them for your behaviors (e.g., having a click on one of the nodes bring up a menu, that kind of thing), and in fact Raphael provides some convenience functions for doing that cross-browser.

Improve this answer

4 Comments

Makes sense, the reason I didn't want to do this entirely with Raphael is I wanted to depend on browser for things like scrollbars if the graph got too big. I also read in the discussion group that having input elements on the nodes is very tricky and my nodes are heavy in that respect. Zooming is another concern, I keep reading about all these plugins to address zooming issues while standard jQuery events/attributes work perfect in my case. Little things like 100% width is tricky too. I guess it seems that the browser handles almost everything so beautifully I'd like to take advantage.
@at: Some of that I don't see a problem with (like using the browser for scrolling). Raphael's nodes are DOM elemenets, and the canvas it draws on (Raphael canvas, not HTML5 canvas) is a DOM element -- so you can set the size of that element, etc. Input elements on the nodes, I have no idea how hard or easy that is. :-) Nor zooming. Good luck with it!
J. regarding the issue with using the browser for scrolling... yes Raphael uses DOM, but without experimenting and only reading the discussion forums and documentation, it has fixed sizes of elements. So if you add a node off screen or even move the canvas so some of it goes off screen, then it just doesn't appear... there's no scrolling unless you implement scroll bars. You could "listen" for those situations and adjust the sizes of Raphael, but just from what I read, it looks tricky. I guess I really need to experiment with Raphael.
@at: ". I guess I really need to experiment with Raphael." I think you do. :-) Hopefully you'll find that it works better than you think.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.