How to illustrate multigraphs in Javascript?

Question

This question is looking for a practical and easy way for drawing multigraphs using Javascript.

First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:

Is there any jQuery plugin (or javascript library) out there for this purpose ?

I thought i can use WolframAlpha's API and use its images, something like this:

but it have lots of problem:

1. I can't move nodes or add remove edges interactively.

2. Only 2000 API calls per month. Not enough.

3. I can't produce large or intermediate graphs.

4. They are really ugly!

Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).

Solution 1

Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.

https://js.cytoscape.org/

Solution 2

If you are allowed to use Google Charts API you may refer to this

http://code.google.com/apis/chart/image/docs/gallery/graphviz.html

Example:

https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

Solution 3

Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes

jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html

possibly http://js-graph-it.sourceforge.net/ may support multigraphs.

but as far as your issue

4- Its really ugly!

These may not appeal to your aesthetic.

Solution 4

I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point

Solution 5

You might want to check this one out: www.d3js.org

You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.

View more solutions

Comments

[Martin Thoma]

This answer might help.

[Michel Gokan Khan]

i want a "javascipt" library ... JGraphT is a Java library.

[Michel Gokan Khan]

thanks, but i want interactivity generate graphs via user input in my webpage.

[Michel Gokan Khan]

@parashant-bhate: great suggestion. it supports Multigraphs too. It will be perfect if I could make it more interactive. Like click over nodes in order to delete them or move node or delete edges by clicking over them. thanks again

[Jan Jongboom]

I know, but there are no javascript libraries for that. As you already pointed out that you might just wanted to use Wolfram API which spits out images, this could be a viable solution.

[Michel Gokan Khan]

I don't know why I'm insist not to use flash or applets ... now I'm working on @Konstantin's solution and do the development by myself. Of course after finishing development I'll make it fully open source. Thanks anyway.