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 | |
| nodesColor | Optional.The color of the node. Overwrites the default value. | |
| src | Optional. 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. | |
| nodesColor | Optional.The color of the node. Overwrites the default value. | |
| src | Optional. Only for the type='image' nodes. Overwrites the default value. | |
USAGE: renderPicture(TO_RENDER, MyConfigCanvas, 'canvas');
- var TO_RENDER =
- { nodes: [
- {type:'circle', x:75,y:75,radius:15, text:"Node with link", onclick: "javascript:window.location.href='http://www.evox.ro'"},
- {type:'circle', x:150,y:400,radius:10, text:"Node 2"},
- {type:'circle', x:75,y:255,radius:20, text:"Custom node color", nodesColor:"#989898"},
- {type:'circle', x:350,y:180,radius:17},
- {type:'circle', x:250,y:275,radius:12},
- {type:'rectangle', x:700,y:400,width:100, height:80, text:"Bigger text for the rectangle", nodesColor:"#cdcdcd"},
- {type:'rectangle', x:600,y:500,width:50, height:50, text:"Bigger text for the square", onclick:"javascript: alert('Clicked!');"},
- {type:'image', x:700, y:700, src:"server-icon.png", text:"Text for picture"}
- ],
- arcs: [
- {start:0, end: 3, text:"Text for edge 1 - double arrow", arrowBegin:1, arrowEnd: 1},
- {start:0, end: 2, text: "Edge 2" },
- {start:1, end: 4, arcLineWidth: 4, text:"custom width"},
- {start:2, end: 4},
- {start:0, end: 4},
- {start: 5, end: 3},
- {start: 6, end: 3, arrowBegin:1, arrowEnd:1},
- {start: 5, end:6, arrowBegin:1},
- {start: 7, end: 5, arrowEnd:1, arrowBegin:1}
- ]
- };
configCanvas
The canvas can be configured by using the follwing structure:
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 |
- var MyConfigCanvas = {
- nodesColor : "#ffcccc",
- backgroundNodesText: "#F6F4DA",
- nodesTextColor : "#000000",
- arcColor : "#000000",
- backgroundArcText: "#A2ADBC",
- arcTextColor :"#ffffff",
- nodesImage: "server.png",
- arcLineWidth: 0.6,
- arrowLength: 20,
- arrowAngle: 0.24,
- fontSize:8,
- canvasWidth: 1201,
- canvasHeight: 707
- }
- renderPicture(TO_RENDER1, configCanvas, 'canvas');