Dojo.gfx

I recently searched about a javascript/ajax way of rendering graphics to a web page and the best choice seems dojo. What dojo does (and other similar libraries also) is to render SVG graphics for the browsers which supports it and VML for IE. Of course IE has his own special standard and cannot render SVG without an Adobe plugin.

Here is some code which renders 3 rectangles and the connecting lines in dojo (similar to the result of the image from the first part):

var node = {height: 30, width: 100, fontSize: 12, marginColor: "#000000", bgColor: "#F0D717"};

var makeNode = function(pos_x, pos_y, node_text){
var aRect = surface.createRect({x:pos_x, y:pos_y, width:node.width, height:node.height});
aRect.setFill(node.bgColor);
aRect.setStroke({color: node.marginColor, width: 2});

var aText = surface.createText({x:(pos_x + node.width/2), y: (pos_y + node.fontSize + (node.height - node.fontSize)/2), text: node_text, align: "middle"});
aText.setFont({family: "Verdana", size: node.fontSize + "px", weight: "bold"});
aText.setFill("#000000");}

var connect = function(node_top, node_bottom, line_config){
aLine = surface.createLine({ x1: node_top.x + node.width/2, y1: node_top.y + node.height, x2: node_bottom.x + node.width/2, y2: node_bottom.y });
if(line_config)
aLine.setStroke(line_config)
else
aLine.setStroke({color: "#001234", width: 3});}

function drawStuff(){
makeNode(50,90, "Solis");
makeNode(10,10, "CRM");
makeNode(10,180, "Orders");
makeNode(120,180, "Offers");
connect({x:10,y:10},{x:50, y:90});
connect({x:50, y:90}, {x:10, y:180});
connect({x:50, y:90}, {x:120, y:180});}

Here is an image on how the graph looks in Firefox.
Dojo graph

The problem with dojo is that it is still in it’s infancy. For instance I had to use the nightly version in order to have support for text objects.