56 thoughts on “Showcase

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

    Looking forward to trying it, haven’t yet.


  2. 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. 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) {
        this.tp = tp;
        this.tp.ox = 0;
        this.tp.oy = 0;
                    this.tp.translate(event.clientX -
                        this.tp.ox,event.clientY - this.tp.oy);
                    this.tp.ox = event.clientX;
                    this.tp.oy = event.clientY;
        return this;

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

    Thanks for pointing this out!

  4. 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);
    1. 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. 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. (1) When I try to run the sample http://dracula.ameisenbar.de/0.0.3alpha/dracula_algorithms.html
    in IE 8, I get the below error :-

    Message: Object doesn’t support this property or method
    Line: 216
    Char: 9
    Code: 0
    URI: http://dracula.ameisenbar.de/0.0.3alpha/js/dracula_graph.js

    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 http://tinypic.com/view.php?pic=28atd01&s=7
    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 ?



    1. 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)
              fun.call(thisp, this[i], i, this);
  7. 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. 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. 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. 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.

    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!

  11. P.S.

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

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

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


  20. 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. 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;

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

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

    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!

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

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

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

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>