JavaScript Graph Library

Dracula is a set of tools to display and layout interactive graphs, along with various related algorithms.

No Flash, no Java, no plug-ins. Just plain JavaScript and SVG. The code is released under the MIT license, so commercial use is not a problem.

Creating a graph is simple! You also can customize anything easily.

The code:

var g = new Graph();
 
g.addEdge("strawberry", "cherry");
g.addEdge("strawberry", "apple");
g.addEdge("strawberry", "tomato");
 
g.addEdge("tomato", "apple");
g.addEdge("tomato", "kiwi");
 
g.addEdge("cherry", "apple");
g.addEdge("cherry", "kiwi");
 
var layouter = new Graph.Layout.Spring(g);
layouter.layout();
 
var renderer = new Graph.Renderer.Raphael('canvas', g, 400, 300);
renderer.draw();

The result:

Enjoy.

Note: If you are looking for a commercially backed graph drawing software for the browser, take a look at the fantastic library yFiles for HTML! It is the most feature complete graph drawing library available for HTML5 and pleasant to work with.

165 thoughts on “JavaScript Graph Library

  1. Hi,
    Thanks for the code!
    What I need more, is to be able to fix the position of all the old nodes when redrawing, and only to add the new nodes with minimal rearrangement of the nearby nodes.
    Please advise. Thanks.

    1. Currently this is not easily possible, though it is somewhere on my list… check back in a few months!

      1. Hi i am vijay, I am new to this place.I have a question can we set the distance of nodes based on label values.
        e.g: I have set amount on the label so based on amount can we set the distance less amount less distance great amount great distance

        Thanx a lot.

  2. hi there

    thank you for your framework.
    I have been modifying the original version dated 02/03/2010 for the last couple of months for visualization of a debate for my bachelor thesis. of course i will cite you.

    if you feel like having a sneak peek, email me such that I tell you the project page

    cheers,
    Tony Kumin

  3. There is an error in dracula_graph.js

    nodes should be initialized to {} not [].
    Otherwise you’ll iterate over “forEach” and introduce a spurious node.

  4. Hi,

    with Firefox it works fine, but on Internet Explorer it doesn’t :(

    (I’ve tested it under Internet Explorer 7)

    Will it be cross-browser in the future?

    1. Yes, cross-browser is on my roadmap. Currently, only modern, standard-conform browsers are supported, like Opera, Safari, Chrome, Konqueror and Mozilla/Firefox should work. I haven’t tested IE yet, since I’m mostly on Linux, but have you tried IE8? I am confident that IE9 will work fine with my library once it is released. I think they actually invested some work in version 9.

      1. Hi,
        Thanks for the great framework!
        When I run the example on Chrome and Firefox, it works find. But under IE8, there is a javascript error in graph.js(line 216, char 9) and can’t disply the graph.

        Hope can cross-broswer soon, many thx~

        1. Hi Nicky, unfortunately it doesn’t work on IE9 either (until now). I promise to look into it, once I am on a windows machine again, but from my experience with IE this won’t be an easy fix and I am not sure I want to invest like 60% of my time only to make it work on IE. Microsoft is a big company, they should finally get a decent browser working. My lib works out-of-the-box on Webkit (aka Safari/Chrome), Opera and Mozilla, with only one small adoption I had to fix to make it work. Opera is a tiny company compared to Microsoft, and Webkit on the other hand even started as a hobbyists project. So, if it’s only a few minor fixes, I will do it. Otherwise, as I read somewhere else: The best way to support Internet Explorer is not to support it. A warning message may be an option.

        2. Ah, by the way: Line 216 Char 9 is a closing bracket as far as I see it… looks like fun tracking this one down :-)

          1. As a quick and stupid hack, commenting out lines 216 and 217 allows the graph to draw, although it disables dragging.

            Can’t find any way to debug the problem further within IE so maybe it’s enough to disable drag for unfortunate IE users.

          2. Ah, okay, not every JavaScript implementation has “forEach”. I will re-introduce it along with a test for if that function already exists.

  5. Hi Johann,
    I’d like to your library for my project. As I am dealing with slightly bigger graphs I’d like to be able to zoom in and out aswell as pan around. Is there a simple way to implement that in Dracula/Raphael?
    Thanks for the great work here!

    1. Hi Max,

      While not exactly “zooming” in a sense that you’re using the word, you can very easily implement “zoom in” and “zoom out” buttons that will enlarge the graph, or make it smaller.

      Here’s a very crude implementation of such zoom function. With this “zoom” you’d have to pan around using browser’s own sliders. Which might be just good enough :-)

      (There’s probably a better way to do this with something in Raphael, but I haven’t looked yet.)


      // some initial size
      var depth = 1000;

      function zoom(type) {
      g = getGraph(root);
      document.getElementById('canvas').innerHTML = "";

      // this my experimental Tree layout mode - see https://github.com/grigoryk/dracula-js-fork
      var layouter = new Graph.Layout.Tree(g);
      layouter.layout();

      // scale the size accordingly
      if (type == "out") {
      depth = depth * 0.9;
      } else {
      depth = depth / 0.9;
      }

      // redraw
      var renderer = new Graph.Renderer.Raphael('canvas', g, depth, depth);
      renderer.draw();

      return false;
      }

      I have a pretty good idea of how to implement proper “drag-the-graph” panning, so I’ll be pushing these changes to my github fork of Dracula (https://github.com/grigoryk/dracula-js-fork).

      cheers,
      Grigory.

      1. Hi, Grigory, seems your fork require the Graph has only one root, as a graph, it may has many roots, in this case, the Tree mode won’t work.
        I forked your fork, add a Grid mode at https://github.com/ariestiger/dracula-js-fork
        But thank you very much, I studied your Tree mode and create Grid mode for myself, though my implementation is very dirty and ugly.

  6. Hi Johann,

    My company is about to start work on a project
    involving creating a visualization of our client’s
    employees and the internal workgroups with
    which they are associated. Your graph library
    seems like it would be a good fit for the project.

    Would you be interested in helping with the project?
    If so, send me an email and I can give you more details.

    Sorry to use your comments section for a question
    like this, but I couldn’t find any other way to contact you.

    Thanks.

    – Joel

  7. Hi Johann,

    I currently looking into using your framework for my final year dissertation to create a entity relationship diagram.

    I am having a problem with the nodes going over the canvas boundaries. Its when I render the nodes as rectangles, below is a link to show the problem:
    http://free-12415f14c3a-124e539428a-12b7bbd740a.sandbox.cs4.force.com/

    Is there a simple fix or will I need to look into changing the code in dracula_graph.js?

    Thanks,

    Peter

    1. Hi Peter, sorry for the late answer, busy these days… so, you will only have to change two hard coded values. I was going to make the thing more generic to actually consider the dimensions of the boxes, but until now there is one bounding box around where the dragging is coded and somewhere there’s also a radius that makes the nodes have some distance to the frame. Can you post it when you found it? Thanks! :) and good luck!

    1. Hi Patembe, hiding nodes is on my list, I have even already started hacking… but will still take some months I think :-)

  8. Hi Johann,

    Thanks for making this great library.

    I am attempting to use it for a small project for a client, and I am coming across bugs/missing features, such as the inability to adjust the text size for edge labels.

    Are you maintaining this code and accepting patches?

    If so, would it be possible for you to move the main repository to Github, or to otherwise make it easier for users of Git to submit their changes? I see that there is already one fork on Github, for Grigory’s Tree code (https://github.com/grigoryk/dracula-js-fork). I would hazard to guess that many of the users your work has attracted are Github users ;)

    I don’t have time to learn how to use launchpad now…

    1. Hi Marc, I am thankful for any improvements and patches, of course! Since there seems to be a demand for GitHub users to take part, I’ll soon set up some way to merge Git and Bazaar (used by Launchpad) changes. Others also seem to do it.

      Anyway, Bazaar and Git are almost the same, really! Except that Bazaar uses “branch” instead of “clone”. Okay, so stay tuned, I’ll post a message as soon as I have set up a GitHub mirror of the code… thanks in advance for any improvements.

  9. Hi! Great stuff. I found this via the ‘graph’ tab in http://lackoftalent.org/michael/ which uses dracula to display RDF graph data. These have node-edge-node structure where the edges are labelled and directed. Doing this in Dracula seems a bit tricky, unless I’m missing something. My version of that hack is at svn.foaf-project.org/foaftown/2010/ogrdfa/rdfa1.html but buggy and just a workaround; I introduce additional nodes for each edge label, which is a bit awkward.

    All of which is longwinded way to ask: how can I label the edges of a graph? I’m sure it must be possible but haven’t figured it out yet…

    1. Hi Dan,

      Cool!

      If you want to see an example of labeled directed graph edges using dracula, please take a look at the online demo for Simfo, and click over to the Graph tab.

  10. Nice graphing tool. Thanks for making this available and open-source.

    Have you considered integrating edge routing into it as an option?
    See Integrating Edge Routing into Force-Directed Layout.

    This is an important feature for our application. I’m not sure how feasible it is to do in the browser, especially with larger graphs; but JS is getting much more powerful and fast these days, and what used to be server-only tasks can now be done in the browser.

    There are a lot of things that can be done with separation constraints to “allow
    aesthetic requirements—such as placement of nodes below other nodes in
    directed graphs or containment of nodes in clusters—to be integrated into force directed layout.” Not all of them have to be implemented all at once, but if Dracula offered these features, it would be unique among client-side graph layout libraries.

    Thoughts?

    1. I’d love to see edge routing, but it would take too much time right now… at the end of the year is realistic.

  11. Hello,

    Nice and great tool, first of all. I’ve been playing with it, and mixing it with my GWT and SmartGWT application. And that’s why I’ve found what I think it might be an important bug..

    Using your library, suddenly some of the mouse event weren’t working well, so I investigated.. Finally I found it.

    On your dracula_graph.js, at your ‘Graph.Renderer.Raphael’ function (line 152) you capture two mouse events (onmousemove and onmouseup), but you are using ‘document.onmousemove’ and ‘document.onmouseup’, and that’s a too wide scope I guess…

    Those definitions were interfering with the behavior of my GWT application. I’ve solved it (quite simple) replacing ‘document’ by the element where the SVG is drawn (as you have it’s id as argument). As follows:

    var d = document.getElementById(element);
    d.onmousemove = function() { (…) }
    d.onmouseup = function() { (…) }

    This way everything works like a charm :)

    1. Thanks a lot for your fix! Using mouse events on document is definitely evil :-)
      Also, I was thinking of using the hover event as it seems to me easier to handle…

      I will include your fix in the latest sources soon!

  12. Hi.

    Is there some built-in way to get graphdracula to draw two directed edges in opposite direction without overlapping?

    Eg. I have a graph like:
    g.addEdge(“a”, “b”, {directed:true});
    g.addEdge(“b”, “a”, {directed:true});

    Thanks for a nice library, good for quick stuff :)

      1. I also have similar concern. Is it possible for a node to have multiple “endpoints” which terminates a edge?

          1. I would also appreciate a way that two directed edges in opposite direction are drawn without overlapping. Is there already a way to do this? Or is it possible to get the path object of Raphael to customize it?
            Thanks in advance!

          2. @Michael: Changing the width is easy. Look at dracula_graffle.js around lines 91-94 where you have the Raphael objects describing the lines. Also, each edge should have the fg and bg properties to work on.

    1. I’ve put it on my list – won’t have the time in near-future. You should check out the file “dracula_graffle.js” – there the edge object is being created. Also, in the “dracula_graph.js” around the first lines there is the function that adds the edges… instead of “directed” you could introduce some feature like “dual” and then look for it in the dracula_graffle.js when drawing the arrows.

      1. Thanks for the quick reply!
        I’ll check the sources you mentioned. Is there also lying the solution for setting the width of edges?

        1. Yes, that’s also the place for the width. A generic solution would be nice, so you could set the width when creating the edge.

  13. Hi, great api and great implementation, but IE has some problems.

    For example, on IE 7 or 8 if you do a double click anywhere on “canvas” (here on your demo) and then you do a double click on any graph node a very nasty error will be born … check it out :)

  14. Nice work!
    Does it support bidirectional edges? eg node A connects to node B and node B connects to node A as well. Me thinks it will crash….
    Still this is awesome!

  15. I am a new user. I try to run the example code at the first page, but it doesn’t work, I get the error message :
    layoutPostX is null in the 379 line of dracula_graph.js

    This is my jsp file:

    chat

    var g = new Graph();

    g.addEdge(“strawberry”, “cherry”);
    g.addEdge(“strawberry”, “apple”);
    g.addEdge(“strawberry”, “tomato”);

    g.addEdge(“tomato”, “apple”);
    g.addEdge(“tomato”, “kiwi”);

    g.addEdge(“cherry”, “apple”);
    g.addEdge(“cherry”, “kiwi”);

    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();

    var renderer = new Graph.Renderer.Raphael(‘canvas’, g, 400, 300);
    renderer.draw();

    1. change the Graph.Renderer.Raphael function in main file and return this from it. then you can call its draw method to redraw the graph, you will also need to call the layout method on layouter.

  16. Hi.
    Nice,simple and useful api.
    but i want more functionality.
    is it possible that we can edit edge or we can drag-drop edge and change node by drag and drop edge?
    Thanks.

  17. Hi,

    I have so much edges on my graph and began be unreadable. It is possible create a graph with scrollbar?

    1. I created a small, scrollable container div and into it I put a much larger canvas div. Make sure you set width/height to the actual width/height of your canvas and it will work.

  18. Hi, download link doesn’t works… could you fix it or get another one please?
    GitHub get a page with a 404 error for dracula_0.0.3alpha3.tar.gz file…
    Thanks

  19. Philipp, Grigory does a good job – Tree Layout mode https://github.com/grigoryk/dracula-js-fork but he used an old version of your library. I tried implement his code in your last version but it doesn’t work. The main difference I see in your last code you use nodes = {} but in a Grigory’s code nodes = [] I guess the Tree Layout is a good extension for your library. Something like this http://thejit.org/static/v20/Jit/Examples/Spacetree/example1.html Do you plan add Tree Layout in your project?

  20. Hi

    Thanks for making this graph tool available. I am using this in
    my project to display the graph of authors with their connected co-authors.
    In the example or documentation the nodes labels and their names are added manually.
    eg) g.addNode(“Strawberry”)..and so on!!
    But what I am looking for is that how could I give the addNode method a list of names which it will get dynamically by a function for which it can draw the nodes and edges between them.

    Does anyone have an idea on how to do this?

    Thanks in advance.!!

    1. Just go to the graffle file, there the lines are defined, and replace the curve with a straight line or modify the curve that is described there. Don’t forget to check out the RaphaelJS docs on this!

  21. Hello, considering a code like this:

    g.addEdge(“apple”, “cherry”);
    g.addEdge(“cherry”, “apple”);

    Is it possible to create an offset between these two generated connectors?

    Thanks in advance!

    1. No that’s not yet easily possible, you’d have to do it in the code. But somewhere in the future I would like to make it possible.

  22. No, not yet. The node structure is somewhat in the Graph class as an JSON object, you could write a simple parser that iterates over this structure and generates XML or vice versa.

  23. how to insert label inside node ………
    how to draw graphs in table i.e each row as seperate graph
    ….plz help me out

  24. hi!
    Really great library here! I noticed the layout usually renders nodes from right area of the canvas (parent) to left (children) and bottom (parent) to top (children). Is there any way to reverse this? Thanks!

  25. Very good Library, I was looking at using arbor.js for a graphing project I am working on, but I think your Library might work better. Thanks.

  26. Hi everyone,I am working on project for graph databases.I am trying to display graph in a browser having 2000 nodes and 10,000 edges.I tried something for like 100 nodes and 200 edges using Jquery.but It is taking long time to display all the nodes.Do anyone have a better solution for displaying graph in a browser or for improving my time to load the graph fast.Help meThank you.

  27. Hello, thanks for this useful library!
    Is it possible to trigger an event (e.g. pop up a dialog box with the node’s label) if I were to select a node and then press a key (e.g. tab) on the keyboard? I couldn’t find a solution in the documentation.

  28. I have been following this library post for quite a long time now. I wanted to check if the layout algorithm using in this js library avoids collision between edges or tries to reduce the crossing between edges?

  29. Hi, thanks for the library! I’m wondering about how to make self-loops show up nicer. Currently, they seem to compress into .. nothingness, and their labels just float over the node. Any idea on how to fix this?

  30. What sort of graph drawing algorithm do you use? is it forced based? eigen vector based? I’m sorry, I’m sure I could read the source code and figure it out, but hearing from you might be faster.

  31. What else can you put inside the label-style? such as in the example below?
    I’d like to add a background to the label so the edge line doesn’t get in the way of the label.

    st = { directed: true, label : “Label”,
    “label-style” : {
    “font-size”: 20
    }
    };

  32. Great library and it’s helping me a lot. My graphs display fine but I’m having some trouble with labels though. I think this is the right syntax:

    g.addNode(“Start”, {label:”START”});

    The node is drawn and with the proper edges but no text label in the bubble. Any thoughts about what this could be? Fails with both Safari and Chrome. Version is current as of today (11 Dec).

    Thanks!

  33. I’ve found/fixed a bug related to deleting edges. If the edge has a label, then it will remain painted on the canvas after the edge is deleted. In the dracula_graph.js file, inside of the removeNode function, before the statement this.edges[i].hide, inserting:


    this.edges[i].connection && this.edges[i].connection.label.hide();

    Seems to fix the problem nicely.

    1. Yes, still thinking about it, and have a few new features in the pipeline. Right now I want to fix the IE9 issue but don’t have much time…

  34. Thanks for that. I am currently searching what projects are out there about visualisation. Thats how i found this. Thanks for publishing your work.

  35. Hi, I find this really useful. Thank you for the work. One problem I am facing is putting a mouse down event for the edges. Is there any way that I can capture a click event on a edge label? I would appreciate any help. Thanks!
    Hrishi

    1. This should be now possible in the latest code on github. I’ve replaced the handlers to use drag instead of mousedown.

  36. Hi, great library! Did you ever implement being able to hard code the positions of the node instead of laying it out dynamically. If no, any pointers on how I could do this with dracula? I am working on a project that requires nodes to be at specific positions.

    1. I also had the same requirement and what i understood is even we set the position in render method its get overwritten in drawNode method in dracula_graph.js. So i commented out the line shape.translate(Math.round(point[0]-(box.x+box.width/2)),Math.round(point[1]-(box.y+box.height/2))) in the method so it keeps the node position.

      NB: I know this is not the right way to approach it, but still may help for basic requirements

      1. I implemented a simple fixed layout class, which worked fine. Just load the following JS and use this class as the layouter.

        /* Fixed layout method
        ===================

        Each node should be created by giving explicit “x” and “y” coordinates, which will be normalized when drawing.

        g.addNode(“N”, { x:4, y:8 });
        */

        Graph.Layout.Fixed = function(graph) {
        this.graph = graph;
        this.layout();
        };
        Graph.Layout.Fixed.prototype = {
        layout: function() {
        this.layoutPrepare();
        this.layoutCalcBounds();
        },

        layoutPrepare: function() {
        for (i in this.graph.nodes) {
        var node = this.graph.nodes[i];
        if (node.x) {
        node.layoutPosX = node.x;
        } else {
        node.layoutPosX = 0;
        }
        if (node.y) {
        node.layoutPosY = node.y;
        } else {
        node.layoutPosY = 0;
        }
        }
        },

        layoutCalcBounds: function() {
        var minx = Infinity, maxx = -Infinity, miny = Infinity, maxy = -Infinity;

        for (i in this.graph.nodes) {
        var x = this.graph.nodes[i].layoutPosX;
        var y = this.graph.nodes[i].layoutPosY;

        if(x > maxx) maxx = x;
        if(x maxy) maxy = y;
        if(y < miny) miny = y;
        }

        this.graph.layoutMinX = minx;
        this.graph.layoutMaxX = maxx;

        this.graph.layoutMinY = miny;
        this.graph.layoutMaxY = maxy;
        }
        };

        1. Hi Marcelo,
          if(x > maxx) maxx = x;
          if(x maxy) maxy = y; // need a correction here!!
          if(y < miny) miny = y;

          thanks in advance

          1. Marcelo and you are my heros!!!
            is exactly I was looking….
            correction:

            if(x > maxx) maxx = x;
            if(y > maxy) maxy = y;
            if(y < miny) miny = y;

            and add a missing:

            if (x<minx)minx=x;

  37. Hey man,

    I’ve browsed the internet for a js graph library yesterday and came accross yours.
    It is great and so easy to use.

    I am programming a small textadventure framework and you lib is being used to display the adventure steps and their connections. It works great.
    Thanks!

    Can you tell me how I can add mouseover events on the edges and nodes?

  38. Great man, evergreen framework…. could you please help me, how to connect parent and child nodes..? how to find out the distance between different nodes connected to one parent

    Thanks & Regards
    sri

  39. Hello,

    Thanks for this awesome library. Really easy to use and looks nice.
    Unfortunately I got an error PopUp in IE8 and IE9 when drawing a complex graph (with many nodes and edges):

    “STOP RUNNING THIS SCRIPT?
    A SCRIPT ON THIS PAGE IS CAUSING YOUR WEB BROWSER TO RUN SLOWLY. IF IT CONTINUES TO RUN, YOUR COMPUTER MIGHT BECOME UNRESPONSIVE”

    Is there any solution for this problem?
    Many thanks!

    B.R.
    c0by

  40. Hi. I’m considering integrating dracula graph library into mine raphaeljs porting to GWT (java) http://code.google.com/p/raphael4gwt/. It already contains a full porting of graphael (charts). For my part the requiriment is that dracula uses the last raphaelje version (2.1). As I can see from your sources, it uses an old raphael version 1.3. So have you tried making it to work with rapahel 2? and another question is ¿is jquery a dependency? Regards and congrats for your lib.

  41. Hi,

    this library seem to be the only (free) javascript graph framework with edge labelling. *thumbup*

    I tried to implement a dynamic graph, which can add nodes by “onkeyup()”. But the new nodes haven’t been drawn or they are drawn at (0|0). I tried it also with the Fixed layout from Marcelo above, but with the later added nodes it does the same way.
    Can somebody help?

  42. Ich habe deine coole Library gebraucht, in einer fuer meine Mitbearbeiter und Editoren bestimmten Seite. Jetzt koennen sie ihre Arbeit visuel ueberpruefen, ehe sie losschicken. Ich wuerde gen Dir welche Screenshot zuschicken, wenn du mir deine Email schriebst. Tschuess. Mark.

  43. I am trying to register a click event on a node but it doesnt seem to be working
    g = new Graph();

    /* add a simple node */
    var strawberry = g.addNode(“strawberry”);

    strawberry.click(function()
    {
    alert(“clicked”);
    });
    g.addNode(“cherry”);

      1. I tried the click event with the latest code. But its not working
        Error:- Uncaught TypeError: Object # has no method ‘onclick’

  44. Very good API, thanks man!

    I just have a problem: I need to select multiple nodes and move them all together. How should I do that? Also, is it possible rectangle selection of multiple nodes and then move them together?

    Thanks in advance for the reply!

  45. Hi, i have a problem with the library. All the nodes are positioned at the top left. Is there something i m missing ?

    thanks

  46. roxio easy cd creator 5 platinum probate records centre rubbermaid sheds jafra skin care bradley smoker simmons 22 mag Vertiscapes billiard window blinds czech map [url=http://www.iwcwatchsalejp.com/]IWC 販売[/url]
    [url=http://www.viviennejpsale.com/]ヴィヴィアン 店舗[/url]
    beach ball needle board swarovski flatback rhinestones hp zd7000 japanese rain chain pinnacle studio 8 se pre calculus for dummies window tint [url=http://www.viviennejpsale.com/]ヴィヴィアン 通販[/url]
    cb radio sales gardening tool set psc1350 sante fe railroad recruitment software return address labels roll wet bar powerbook g5

  47. First, Hello to everyone and thanks to share this nice library.
    Second: ¿ Im trying to make a circular process, for example: StateA -> StateB->StateC->StateA->StateB … the problem is the arrow between nodes by passing twice shown as if it were just one. Thanks!

  48. Hello, I’ve been using this library for a while (June 2013) and I have some questions.
    First of all, is it possible to add onclick events on nodes? I saw that others have also asked this but no clear response was given
    Also, I tried out the Dijkstra algorithm. My graph is directed and after running some test, I found out that the algorithm simply does not consider the direction of an edge

    How can I solve these two issues?

  49. I have a problem: I have to plot a graph of user attendance etc based on data from database. Can you please tell us which java script library i should use and some sample code would be appreciated.

  50. I would like to know that is there a way that two directed edges in opposite direction are drawn without overlapping. Is there already a way to do this? Or is it possible to get the path object of Raphael to customize it?

    Thanks in Advance

  51. very useful lib. I would try porting this to svg.js since it offers fine-grade control over SVG
    I already have a half-working prototype using ver. 0.0.3alpha5 of your lib (the trunk ver does not work), is there any chance to collaborate on this? are you continuing work on this?

    I will use this in my team to show medical algorithm charts. I can show you some demos (private)

  52. Hey – I’ve modified my version of the code to account for overlapping labels when you have a bidirectional edge. Are you interested in patches?

    If someone wants to take it I’ll leave it here:
    It works for me – but it needs a small amount of thought before it would handle the ‘general’ case:
    Assumptions:
    Currently assumes that I can use the node ‘text’ attribute to look up the node in the graph – requires unique node labels
    You want size 12 text (or at least 12 pixels between overlapping labels)

    /* setting label */
    //find how many overlapping edges there are, use "text" to look up the node
    fromNode = g.nodes[obj1[1].attrs["text"]]
    toNode = g.nodes[obj2[1].attrs["text"]]
    //pick one of the nodes to examine, the one with less connections will me most efficient
    examNode = fromNode.edges.length<toNode.edges.length?fromNode:toNode
    for(total=0,i=0;i<examNode.edges.length;i++){
    //count the number of overlaps
    //but keep track of which label we're actually drawing ('me')
    if(style.label==examNode.edges[i].style.label){
    me = total+1
    }
    //this checks that the edge I'm looking at overlaps me
    if(
    (
    (examNode.edges[i].target.id==toNode.id)&&
    (examNode.edges[i].source.id==fromNode.id)
    )||
    (
    (examNode.edges[i].target.id==fromNode.id)&&
    (examNode.edges[i].source.id==toNode.id)
    )
    )
    {
    total++
    //this is the individual pixel offset for that label on that edge
    //this calc aims to distribute the labels evenly above and below the mid point
    offset = (me-((total+1)/2))*12 //12 is the pixel spacing
    }
    }

    /* YOU NOW NEED TO USE YOUR offset IN THE DRAW CODE */

    /* Edit the following bit of code lower down to add the 'offset':

    (edge.label && edge.label.attr({x:(x1+x4)/2, y:((y1+y4)/2 + offset) })

    */

  53. Great framework, and its very easy to use.

    Using this framework how can i implement family tree(child node is derived from two parent nodes)

    Thanks in advance

  54. I posted a patch for the overlapping edges / labels problem but I can’t see it in the comments – is the forum still open?

    R

    1. The forum is still open, but I have to go through 100 spam messages for each good one (despite using a spam filter) so things take a while – I promise to be faster in the future :)

  55. Johann,

    Is the library still being developed? Latest download is an Alpha from 2012.

    Also out of curiosity – is the name of the library “Graph Dracula” intentional :) ? (“Graph” or “Граф” is Russian for “count”)

    1. I still push some code from time to time to GitHub, but it’s currently not stable. I plan to work more on it in the future! The name “Graph” is intentional, since it’s also “Graf” (count) in German :)

  56. This is a very useful software … Thank you very much for the effort you’ve done.
    I have one question please, can someone include this API in a commercial software that is not open source ?

    Regards,

    1. Hi, sorry it took so long: usage of this library in commercial projects or software that is not open soure is totally okay!

  57. Great job simple .but useful
    but how could I adjust the length of the edges
    and make the node not draggable ?????
    I’m writing a paper on Visualization
    so I really need those feature…

  58. Thanks for sharing such a great article
    can you please suggest how to Put node name into circle only.

    Thanks in advance

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>