• Home
  • Projects
  • Contact Us
  • Pet projects
  • Politica de confidentialitate
  • Canvas graph HowTo
  • Canvas graph Demo

I was searching for a web tool to display graphs generated dinamically. It suppose to receive nodes and links between nodes. I found something but it wasn't exactly what I was searching for so I began to build my own library. A drag & drop functionality was a must and a way to store and restore the coordinates of the nodes was a request.

The actual implementation for our customers saved the coordinates for the nodes and restores the saved coordinates at the next load of the page. The library can be useful when in need for a tool to illustrate various data structures like network arhitecture or company hierarchy.

NODES

Attribute Possible values Description
type circle, rectangle, image REQUIRED. The type/shape of the node
x A value between 0 and the width of the canvas. REQUIRED.The x (horizontal) coordinate of the center of the node.
y A value between 0 and the height of the canvas. y=0 is top of the canvas REQUIRED.The y (vertical) coordinate of the center of the node.
radius Optional. For the type='circle' nodes the radius is required. The value is in pixels.
text Optional.The label which is displayed on the node. Please note is not multi-line and it will not wrap.
onclick Optional. The javascript code to be called when onclick event is fired on the node.s
nodesColorOptional.The color of the node. Overwrites the default value.
srcOptional. Only for the type='image' nodes. Overwrites the default value.

ARCS / LINES

Attribute Possible values Description
start Value range: 0 - length of the nodes array REQUIRED. The index on the start node in the nodes array
end Value range: 0 - length of the nodes array REQUIRED. The index on the end node in the nodes array
text Optional.The label which is displayed on the arc. Please note is not multi-line and it will not wrap.
arrowBegin Optional. Set to 1 for an arrow end.
nodesColorOptional.The color of the node. Overwrites the default value.
srcOptional. Only for the type='image' nodes. Overwrites the default value.

USAGE: renderPicture(TO_RENDER, MyConfigCanvas, 'canvas');

  1. var TO_RENDER =
  2. { nodes: [
  3. {type:'circle', x:75,y:75,radius:15, text:"Node with link", onclick: "javascript:window.location.href='http://www.evox.ro'"},
  4. {type:'circle', x:150,y:400,radius:10, text:"Node 2"},
  5. {type:'circle', x:75,y:255,radius:20, text:"Custom node color", nodesColor:"#989898"},
  6. {type:'circle', x:350,y:180,radius:17},
  7. {type:'circle', x:250,y:275,radius:12},
  8. {type:'rectangle', x:700,y:400,width:100, height:80, text:"Bigger text for the rectangle", nodesColor:"#cdcdcd"},
  9. {type:'rectangle', x:600,y:500,width:50, height:50, text:"Bigger text for the square", onclick:"javascript: alert('Clicked!');"},
  10. {type:'image', x:700, y:700, src:"server-icon.png", text:"Text for picture"}
  11. ],
  12. arcs: [
  13. {start:0, end: 3, text:"Text for edge 1 - double arrow", arrowBegin:1, arrowEnd: 1},
  14. {start:0, end: 2, text: "Edge 2" },
  15. {start:1, end: 4, arcLineWidth: 4, text:"custom width"},
  16. {start:2, end: 4},
  17. {start:0, end: 4},
  18. {start: 5, end: 3},
  19. {start: 6, end: 3, arrowBegin:1, arrowEnd:1},
  20. {start: 5, end:6, arrowBegin:1},
  21. {start: 7, end: 5, arrowEnd:1, arrowBegin:1}
  22. ]
  23. };
configCanvas
The canvas can be configured by using the follwing structure:
Attribute Description
nodesColor the default background color for the nodes if nothing is set on the node itself
backgroundNodesText the default background color of the text labels for the nodes
nodesTextColor the default color for the nodes label text
arcColor the default color for the lines (arcs)
backgroundArcText the default bakcground color for the labels of the arcs
arcTextColor the default color for the labels of the arcs
nodesImage the default image for the nodes with type='image'
arcLineWidth the default width for the arcs
arrowLength the length of the arrow head
arrowAngle the angle (in radians) of the arrow head
fontSize the default font size
canvasWidth the width of the canvas
canvasHeight the height of the canvas
  1. var MyConfigCanvas = {
  2. nodesColor : "#ffcccc",
  3. backgroundNodesText: "#F6F4DA",
  4. nodesTextColor : "#000000",
  5. arcColor : "#000000",
  6. backgroundArcText: "#A2ADBC",
  7. arcTextColor :"#ffffff",
  8. nodesImage: "server.png",
  9. arcLineWidth: 0.6,
  10. arrowLength: 20,
  11. arrowAngle: 0.24,
  12. fontSize:8,
  13. canvasWidth: 1201,
  14. canvasHeight: 707
  15. }
  1. renderPicture(TO_RENDER1, configCanvas, 'canvas');