42 thoughts on “Showcase

  1. hi first thanks for your library ..it is wonderful..but i have a problem..i want to show every nodes connections but i cant access to nodes without inserting their labels..is there a way that i i can do this?

  2. You have a very fine library but I didn’t use it for lack of event handlers.

    Is there any chance you could add the ability to have event handlers for clicks on nodes and edges? Your lib contains pretty much everything else, it’s easy to use, but lacks that.

    Just a suggestion… 🙂

    Thanks and keep up the good work!

  3. Hi,

    I’m interested in using your graph . but it is showing the id numbers in the field. Is there a way you can avoid getting displayed?

  4. Hi there,

    I’ve been trying to set a custom render function for some of the nodes that should be rectangular and not elliptical. After changing the render function the edges disappeared.
    The render function I used was based on the algorithms case:

        sampleRender: function(r, n) {
            var color = Raphael.getColor();
            var rectangle = r.rect(n.point[0]-30, n.point[1]-13, 62, 66).attr({"fill": color, "stroke": color, "stroke-width": 2, r : "9px"});
            rectangle.node.id = n.label || n.id;
            var set = r.set().push(rectangle).push(
                r.text(n.point[0], n.point[1] + 20, n.label));
            return set;

    Can you help me to figure out the problem?
    Thanks in advance

    1. Not explicitly, but if your data clusters, it will also show up as a cluster as well. The edges that hold the clustered nodes together will also pull the nodes together. Just try it!

  5. 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

  6. 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,

  7. 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!

  8. 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.


  9. Hello!

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


    1. 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 */
      ellipse.node.id = n.label || n.id;
      shape = r.set().
      push(r.text(0, 30, n.label || n.id));

      return shape;

  10. 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!

  11. Hello!

    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?


  12. 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.

    1. 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.

  13. Hi,

    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?

  14. 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,

  15. 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.

        1. 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)

          1. 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. 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?


  17. 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

  18. 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~

  19. P.S.

    I know that as from Jake Stothard’s merge, the


    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.

  20. Johann hi,

    I am using your library in a big GWT project, and needing support for



    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.

    1. 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!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.