this.ctx.strokeStyle = s;

		this.ctx.fillStyle = s;

	}

	this.render = function(data,canvasWidth) {

		var idx = 1;

		var rela = this.canvas;

		this.canvas.setAttribute('width',canvasWidth);

		var lineCount = 1;

		for (var i=0;i<data.length;i++) {

			var in_l = data[i][1];

			for (var j in in_l) {

				var m = in_l[j][0];

				if (m > lineCount)

					lineCount = m;

			}

		}

		var edge_pad = this.dot_radius + 2;

		var box_size = Math.min(18, Math.floor((canvasWidth - edge_pad*2)/(lineCount)));

		var base_x = canvasWidth - edge_pad;

			var row = document.getElementById("chg_"+idx);

			if (row == null)

				continue;

			var	next = document.getElementById("chg_"+(idx+1));

			var extra = 0;

			cur = data[i];

			node = cur[0];

			in_l = cur[1];

			var rowY = row.offsetTop + row.offsetHeight/2 - rela.offsetTop;

			var nextY = (next == null) ? rowY + row.offsetHeight/2 : next.offsetTop + next.offsetHeight/2 - rela.offsetTop;

			for (var j in in_l) {

				line = in_l[j];

				start = line[0];

				end = line[1];

				color = line[2];

				x = base_x - box_size * start;

				// if this is a merge of differently

				// colored line, make it a gradient towards

				// the merged color

				{

					var gradient = this.ctx.createLinearGradient(x,rowY,x,nextY);

					gradient.addColorStop(0,this.calcColor(node[1], 0.0, 0.65));

					gradient.addColorStop(1,this.calcColor(color, 0.0, 0.65));

					this.ctx.strokeStyle = gradient;

					this.ctx.fillStyle = gradient;

				}

				else

				{

					this.setColor(color, 0.0, 0.65);

				}

				this.ctx.lineWidth=this.line_width;

				this.ctx.beginPath();

				this.ctx.moveTo(x, rowY);

				if (start == end)

				{

					this.ctx.lineTo(x,nextY+extra,3);

				}

				else

				{

					var x2 = base_x - box_size * end;

					var ymid = (rowY+nextY) / 2;