I just started trying out SVG the other day. Eventually I hope to be able to know how to do what SE does with their reputation graphs.
For now, I've just been trying to set up an easier way to make lines. I think my below code is decent, but please let me know what I can improve on or what I'm doing poorly.
Would like your thoughts before I start adding like animations, creativity, data to it.
Demo http://jsfiddle.net/ECKNh/
var Line = {};
Line.LINES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var SVGline = function (l) {
this.l = l;
}
for (var i = Line.LINES.length; i > -1; i -= 1) {
Line[Line.LINES[i]] = new SVGline(Line.LINES[i]);
}
SVGline.prototype.createline = function (x1, y1, x2, y2, color, w) {
var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
aLine.setAttribute('x1', x1);
aLine.setAttribute('y1', y1);
aLine.setAttribute('x2', x2);
aLine.setAttribute('y2', y2);
aLine.setAttribute('stroke', color);
aLine.setAttribute('stroke-width', w);
return aLine;
}
function start() {
var aSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
aSvg.setAttribute('width', 1000);
aSvg.setAttribute('height', 400);
var w = document.getElementById('container');
for (var i = 1; i < 11; i += 1) {
var x1 = Math.floor(Math.random() * 500 / 2);
var xx = Line[i].createline(x1, 0, 200, 300, 'rgb(0,0,' + x1 + ')', i);
aSvg.appendChild(xx);
}
w.appendChild(aSvg);
}
start();