Demonstration with edge labels, custom nodes and a dummy tool tip.

Application using the Dijkstra algorithm to search the shortest paths from Berlin to any city in the world.

47 Responses to Showcase

  1. James Cummings says:

    Have you thought about doing this as a JQuery library plugin?

    Looking forward to trying it, haven’t yet.


  2. unagi says:

    I realize this might not be the appropriate place to ask for help but I don’t know where else to look. So, here’s my question anyway: I was experimenting with the first example on this page. Specifically I tried to add a text to the tooltip. This is what I tried:

                    function(el) {
                          r.rect(20, 20, 40, 15).attr({"fill": "#DDDDDD"})).push(
                          r.text(25, 25, "testing").attr({"fill": "#000000"})

    Now, it seems to me that changing the values of the X-/Y-coordinates for r.rect and r.text doesn’t have any effect at all. Thus I cannot position the text within the rect to create a “proper” looking tooltip.

    Is this a bug? Or am I doing something wrong? Any advice would be appreciated.


  3. Johann Philipp says:

    Indeed, there was a bug in the code. You’d better use this version of tool-tip from now on:

    Raphael.el.tooltip = function (tp) { = tp; = 0; = 0;;
              ,event.clientY -;
           = event.clientX;
           = event.clientY;
        return this;

    I just used “translate” instead of setting the coordinates via “attr”.

    Thanks for pointing this out!

  4. sachin says:

    Tried adding a label and it did not come after rendering, any known defect ? Here is what I tried with one of the edges.

    st = {directed:true,label : "Label"};
    g.addEdge("kiwi", "penguin",st);
    • Johann Philipp says:

      I have tried it now and it seems to work. Could you send me the complete code? (strathausen[at]gmail[dot]com). You can also try the latest version or the code on launchpad!

  5. gerryjun says:

    is it possible to adjust the WIDTH of the line connecting the nodes, i have tried adding stroke-width: 12 to this line

    g.addEdge("id35", "apple", {
        stroke : "#bfa" , fill : "#56f",
        label : "Meat-to-Apple" });

    but no luck,


  6. Prashant says:

    (1) When I try to run the sample
    in IE 8, I get the below error :-

    Message: Object doesn’t support this property or method
    Line: 216
    Char: 9
    Code: 0

    Is there anything I need to do to make it run in IE 8 ? Can you pls look into that.
    Our Application must supports IE 8

    (2) We are trying to achieve something like in
    Is there any way can we show/hide the children of W1 and W2 when they click on it ?
    Do you have any example programs ?



    • Johann Philipp says:

      Hi there, just add:

      if (!Array.prototype.forEach)
        Array.prototype.forEach = function(fun /*, thisp*/)
          var len = this.length;
          if (typeof fun != "function")
            throw new TypeError();
          var thisp = arguments[1];
          for (var i = 0; i < len; i++)
            if (i in this)
    , this[i], i, this);
  7. Miguel says:

    i want to take a snapshot for the graph after the user have ordered the nodes. Looking i found a function for this , but it’s does’n work. Can you make a example for this? or give me son directions?

  8. Stephen says:

    Hi Johann,

    Nice work you’ve done! I can see this lightweight lib with simple interfaces really useful to fast build apps with great visualization and interaction effects e.g. workflow, org. structure, etc.

    I also tested the demos on my mobile device (iPhone 3GS) but seems not work yet. Any plans to make it compatible across mobile clients? I think it will help speed up adoption of this lib.

    - Stephen

  9. kymwei says:

    Hey It’s very nice! Can this took change the connection to be arrow or can I put any style sheet in this too?

  10. Eliran Malka says:

    Johann hi,

    I am using your library in a big GWT project, and needing support for graph.removeNode(id) / graph.updateNodeContent(id, content) in the API, since i had only partial success in implementing these myself (all seems fine and the graph updates, but the Raphael fails to re-render).

    is it coming soon, or is it in the roadmap?

    Thanks in advance, Eliran.

    • Michael says:

      How did you use this with GWT? Did you write a wrapper for the js?
      I want to use it with GWT either. Can you share your experiences?
      Thanks in advance!

  11. Eliran Malka says:


    I know that as from Jake Stothard’s merge, the removeNode() should work, but it seems broken anyway, e.g. the node is removed from the graph’s data structure, but remains on the rendered Raphael canvas.

  12. Kathy Shaw says:

    Dear Author,

    As I can see there is already an example about showing labels with animation on the nodes. Is it possible to make the label which on the Edge shows only on hover?

    Thank you~

  13. Kathy Shaw says:

    Sorry,forget to post another question.

    I have thought about to create more than one edge between two nodes for I think there can be more than one relationship between them. Is it possible? It would be best if you can give me an example codes.

    Thanks again

  14. Jennifer says:

    I think what you’ve got here looks very promising, but the examples don’t appear to work in IE8. Given that 90% of my audience must use IE8 (work requirement), that means I won’t be able to use GraphDracula. Do you intend to accommodate IE8′s peculiarities some time soon?


  15. Mon says:

    I would like to customize the edge drawing code, especially label drawing, and also make each label clickable. Will share if this succeeds.
    By the way it is horrible how Raphael does not directly support SVG. SVG import libraries didn’t work for some reason. Anyway.

    • Mon says:

      Hey, just to report, I’ve had some success in amending stuff that I needed.
      I’m working on a very interesting project using your library. Here’s how the graph looks so far
      Once I’m done, I will work to generalize the changes a bit and then perhaps they could be merged. Should I push to github?

      • Sharry says:

        Hi Mon, this is exactly what I was looking for. How did you get with it overall? Is it on Github?


        • Mon says:

          Hey Sharry,
          I haven’t uploaded these changes anywhere.
          The code is still a bit rough, but it works.
          I’ll try to upload on GitHub soon. Should I branch out from Johan Philipp’s repository? (see, I’m not very handy with source control yet)

          • Johann Philipp says:

            Hey there! Yes, forking from my repository on Github is the right way. This will make it very easy for me to integrate your changes into the main branch. Thanks a lot in advance!

  16. boato says:

    Hi there!

    Thanks for Graph Dracula. It’s great.

    One question: Is it possible to span an edge label across multiple lines? In nodes i can use “\n”. In edges this does not work… :(

    Thanks in advance for your replies!

    Best regards,

  17. crystal says:


    Thanks a lot of making the tool. It is simple and nice.

    is there any plan to extend it to have clickable link/node with hyperlink?

  18. crystal says:

    I saw in your example.js

    g.addNode(“Wheat”, {
    /* filling the shape with a color makes it easier to be dragged */
    /* arguments: r = Raphael object, n : node object */
    shapes : [ {
    type: "rect",
    x: 10,
    y: 10,
    width: 25,
    height: 25,
    stroke: "#f00"
    }, {
    type: "text",
    x: 30,
    y: 40,
    text: "Dump"
    overlay : “Hello World!

    Is that for creating the hyperlink? I tried but it didn’t work for me yet.

    • Johann Philipp says:

      No, that was just for an overlay effect. You can create your own render function (see an example in the documentation) and try to set a click event on the label – or select the label via jQuery. Hope it won’t mess up with the dragging. I would like to hear your experience on this! Thanks and good luck.

  19. Alexander says:


    It’s a great library and I would love to use it. Therefore I have got 2 questions:
    1) Is there a way to achieve a hierarchical order, is something already implemented or can it be (easily) added myself?
    2) Is it possible to avoid the automatical reordering of the graph by redrawing?


  20. Bernal says:

    Can i put the nodes in a specific position?? , x and y positions!

    what part of the Graph.Renderer.Raphael i need to modify??

    Thanks! its very important to put the nodes in a specific position!

  21. Allen says:


    I like what you’ve done.
    ButI wonder that if there is a way to control the color of the node which I created.


    • Ano says:

      var render = function (r, n) {
      /* the Raphael set is obligatory, containing all you want to display */

      var ellipse = r.ellipse(0, 0, 30, 20).attr({ fill: “#31B404″, stroke: “#31B404″, “stroke-width”: 2 });
      /* set DOM node ID */ = n.label ||;
      shape = r.set().
      push(r.text(0, 30, n.label ||;

      return shape;

  22. Alexander says:

    Graph edges are not rendered on IE9 :(

    Any chance you fix this? Otherwise we cannot use Dracula Graph on our project while the visualization and look&feel is exactly what we need.


  23. Tomas Alabes says:

    Hi, is there a way to visually connect the nodes? I’m also seeing jsplumb but I’d like to use this library…

    Great work!

  24. Sadaf says:

    nice work.
    When we get an improvment of the layout algorithm with linear graphs?

    Best regards,

  25. Mirco says:

    Great work, I am really impressed by your work!
    One question comming up here:
    Is there any way to cleanly remove a node and its edges from the graph. Actually I tried the method “graph.removeNode(id)” but it won’t render the graph properly.
    I tried to just build up a new graph, but somehow this won’t work neither.

    I would be really happy to get some hint on this issue. Thank you so much for your work!

    Best regards,

  26. Niks says:

    Nice work. Do you plan to integrate it with jquery and make a plugin?

  27. kelly says:

    hello, here is my question:how can I click a node and invoke an event, say junp to another page? Waiting for your reply~~

  28. Shafi says:

    Is it possible to show the alignment lines with this example. I mean when a drag a shape to near another one display the alignment lines. It would help in exact placement of shapes

  29. Vasilis says:

    Hi everyone!

    Here is another use of the library:

    I used it to visualize the pagerank algorithm (its known form at least :p).

    Hope you like it!

  30. Himakshi says:


    Its a wonderful library. Thank you for this.

    I have a question… Can i give to the label of the edge?

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>