SVG - 2D Graph Background

The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).

The program below fetches the body element first. Then a div element is created and assigned the name qMainDiv. Inside qMainDiv, we add a svg element and draw a 2d graph background.

The code background square in gray. Then many light gray lines are placed on it to indicate subdivisions. Next, fewer darker gray lines are placed on top of those, along with numeric labels to the indicate values. Finally, labels are placed along each axis.

Svg2dGraph.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="Svg2dGraph.js"></script>
</body>
</html>

Svg2dGraph.js

var qBody = document.getElementsByTagName("body")[0];

var qMainDiv = document.createElementNS("http://www.w3.org/2000/svg", "svg")
qMainDiv.style.backgroundColor = "#eeeecc";
qMainDiv.style.width="800px";
qMainDiv.style.height="800px";
qMainDiv.style.position="absolute";
qMainDiv.style.borderWidth = "3px";
qMainDiv.style.borderColor = "#000000";
qMainDiv.style.borderStyle = "solid";
qBody.appendChild(qMainDiv);

var qGraphArea = document.createElementNS("http://www.w3.org/2000/svg", "rect");
qGraphArea.setAttribute('x', '70');
qGraphArea.setAttribute('y', '70');
qGraphArea.setAttribute('width', '660');
qGraphArea.setAttribute('height', '660');
qGraphArea.setAttribute('fill', '#eeeeee');
qGraphArea.setAttribute('stroke', 'none');
qMainDiv.appendChild(qGraphArea);

var dSizeX = 730 - 70;
var dSizeY = 730 - 70;
var iSubDivisionsX = 50;
var iSubDivisionsY = 50;
var dDeltaSubX = dSizeX/iSubDivisionsX;
var dDeltaSubY = dSizeY/iSubDivisionsY;

for (var i = 0; i <= iSubDivisionsX; ++i) {
	var qLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
	qLine.setAttribute('x1', 70 + i*dDeltaSubX);
	qLine.setAttribute('y1', '70');
	qLine.setAttribute('x2', 70 + i*dDeltaSubX);
	qLine.setAttribute('y2', '730');
	qLine.setAttribute('stroke-width', '1');
	qLine.setAttribute('stroke', 'rgb(128, 128, 128)');
	qLine.setAttribute('opacity', '.2');
	qMainDiv.appendChild(qLine);
}

for (var i = 0; i <= iSubDivisionsY; ++i) {
	var qLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
	qLine.setAttribute('y1', 70 + i*dDeltaSubY);
	qLine.setAttribute('x1', '70');
	qLine.setAttribute('y2', 70 + i*dDeltaSubY);
	qLine.setAttribute('x2', '730');
	qLine.setAttribute('stroke-width', '1');
	qLine.setAttribute('stroke', 'rgb(128, 128, 128)');
	qLine.setAttribute('opacity', '.2');
	qMainDiv.appendChild(qLine);
}

var iDivisionsX = 10;
var iDivisionsY = 10;
var dDeltaX = dSizeX/iDivisionsX;
var dDeltaY = dSizeY/iDivisionsY;

for (var i = 0; i <= iDivisionsX; ++i) {
	var qLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
	qLine.setAttribute('x1', 70 + i*dDeltaX);
	qLine.setAttribute('y1', '70');
	qLine.setAttribute('x2', 70 + i*dDeltaX);
	qLine.setAttribute('y2', '740');
	qLine.setAttribute('stroke-width', '1');
	qLine.setAttribute('stroke', 'rgb(128, 128, 128)');
	qLine.setAttribute('opacity', '.5');
	// Number labels along the y-axis
	var qNumbersAlongY = document.createElementNS("http://www.w3.org/2000/svg", "text");
	qNumbersAlongY.textContent = i*dDeltaX;
	qNumbersAlongY.setAttribute('x', '55');
	qNumbersAlongY.setAttribute('y', 75 + (iDivisionsY - i)*dDeltaY);
	qNumbersAlongY.setAttribute('fill', '#000000');
	qNumbersAlongY.style.textAnchor = "end";
	qMainDiv.appendChild(qNumbersAlongY);
	qMainDiv.appendChild(qLine);
}

for (var i = 0; i <= iDivisionsY; ++i) {
	var qLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
	qLine.setAttribute('y1', 70 + i*dDeltaY);
	qLine.setAttribute('x1', '60');
	qLine.setAttribute('y2', 70 + i*dDeltaY);
	qLine.setAttribute('x2', '730');
	qLine.setAttribute('stroke-width', '1');
	qLine.setAttribute('stroke', 'rgb(128, 128, 128)');
	qLine.setAttribute('opacity', '.5');
	// Number labels along the x-axis
	var qNumbersAlongX = document.createElementNS("http://www.w3.org/2000/svg", "text");
	qNumbersAlongX.textContent = i*dDeltaX;
	qNumbersAlongX.setAttribute('x', 70 + i*dDeltaX);
	qNumbersAlongX.setAttribute('y', '755');
	qNumbersAlongX.setAttribute('fill', '#000000');
	qNumbersAlongX.style.textAnchor = "middle";
	qMainDiv.appendChild(qNumbersAlongX);
	qMainDiv.appendChild(qLine);
}

var qLabelY = document.createElementNS("http://www.w3.org/2000/svg", "text");
qLabelY.textContent = "Y-Axis";
qLabelY.setAttribute('x', '15');
qLabelY.setAttribute('y', '395');
qLabelY.setAttribute('fill', '#000000');
qLabelY.style.textAnchor = "middle";
qLabelY.setAttribute('writing-mode', 'tb-rl');
qMainDiv.appendChild(qLabelY);

var qLabelX = document.createElementNS("http://www.w3.org/2000/svg", "text");
qLabelX.textContent = "X-Axis";
qLabelX.setAttribute('x', '395');
qLabelX.setAttribute('y', '780');
qLabelX.setAttribute('fill', '#000000');
qLabelX.style.textAnchor = "middle";
qMainDiv.appendChild(qLabelX);

Core JavaScript

SVG - 2D Graph Background

Svg2dGraph.html

Svg2dGraph.js

Output