Showcase

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.

42 Responses to Showcase

  1. James Cummings says:
    July 6, 2010 at 10:49 am

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

    Looking forward to trying it, haven’t yet.

    -JamesC

    Reply
  2. unagi says:
    August 18, 2010 at 8:48 pm

    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) {
                    el.tooltip(r.set().push(
                      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.

    Thanks!

    Reply
  3. Johann Philipp says:
    August 19, 2010 at 8:49 pm

    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.hide();
    this.hover(
        function(event){ 
            this.mousemove(function(event){ 
                this.tp.translate(event.clientX -
                    this.tp.ox,event.clientY - this.tp.oy);
                this.tp.ox = event.clientX;
                this.tp.oy = event.clientY;
            });
            this.tp.show().toFront();
        }, 
        function(event){
            this.tp.hide();
            this.unmousemove();
            });
    return this;
};

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

    Thanks for pointing this out!

    Reply
  4. sachin says:
    August 27, 2010 at 11:32 am

    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);
    Reply
    • Johann Philipp says:
      September 11, 2010 at 9:59 pm

      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!

      Reply
  5. gerryjun says:
    September 2, 2010 at 9:39 am

    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,

    Thanks

    Reply
  6. Prashant says:
    October 30, 2010 at 11:52 am

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

    Thanks

    Prashant

    Reply
    • Johann Philipp says:
      January 14, 2011 at 8:44 am

      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);
    }
  };
}
      Reply
  7. Miguel says:
    November 15, 2010 at 8:10 pm

    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?

    Reply
  8. Stephen says:
    February 18, 2011 at 9:39 am

    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

    Reply
  9. kymwei says:
    March 6, 2011 at 8:33 am

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

    Reply
  10. Eliran Malka says:
    April 18, 2011 at 5:11 pm

    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.

    Reply
    • Michael says:
      September 5, 2011 at 12:46 pm

      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!

      Reply
  11. Eliran Malka says:
    April 19, 2011 at 4:39 pm

    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.

    Reply
  12. Kathy Shaw says:
    April 28, 2011 at 7:09 am

    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~

    Reply
  13. Kathy Shaw says:
    April 28, 2011 at 7:12 am

    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

    Reply
  14. Jennifer says:
    June 1, 2011 at 1:01 pm

    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?

    Thanks,
    Jen

    Reply
  15. Mon says:
    June 9, 2011 at 10:23 pm

    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.

    Reply
    • Mon says:
      June 20, 2011 at 12:49 pm

      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 http://i12.photobucket.com/albums/a213/pestes/mic.png
      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?

      Reply
      • Sharry says:
        September 15, 2011 at 10:11 am

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

        Thanks
        Sharry

        Reply
        • Mon says:
          September 17, 2011 at 2:41 pm

          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)

          Reply
          • Johann Philipp says:
            September 17, 2011 at 5:55 pm

            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:
    July 25, 2011 at 12:19 pm

    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,
    Boato

    Reply
  17. crystal says:
    August 16, 2011 at 6:37 pm

    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?

    Reply
  18. crystal says:
    August 16, 2011 at 9:53 pm

    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.

    Reply
    • Johann Philipp says:
      August 17, 2011 at 3:20 pm

      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.

      Reply
  19. Alexander says:
    September 1, 2011 at 9:26 am

    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?

    Cheers
    Alexander

    Reply
  20. Bernal says:
    September 22, 2011 at 3:47 pm

    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!

    Reply
  21. Allen says:
    November 3, 2011 at 8:28 am

    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.

    Thanks！

    Reply
    • Ano says:
      November 24, 2011 at 2:27 pm

      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(ellipse).
      push(r.text(0, 30, n.label || n.id));

      return shape;
      };

      Reply
  22. Alexander says:
    January 7, 2012 at 10:34 am

    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.

    Thanks

    Reply
  23. Tomas Alabes says:
    January 8, 2012 at 12:16 am

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

    Reply
  24. Sadaf says:
    January 30, 2012 at 10:48 am

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

    Best regards,
    Sadaf

    Reply

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> <pre lang="" line="" escaped="" highlight="">