SVG

SVG Graph [INTERMEDIATE]

Function graphing using SVG as a canvas.

		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script src="ASCIIsvg.js"></script>

	<body style="background-color: silver;">
	<form name="makeGraph">
		<p><span id="fn"><strong style="font-size: 20pt;">Function : </strong>
		<input id="function" type="text" size="33" value="cos(x^3)+sin(x^2)+tan(x)" style="font-size: 18pt;">
		<input id="picture1input" type="hidden">
		<input type="color"  id="color" value="#0000FF">
		<input type="submit" name="button" id="button" value="Plot" style="font-size: 16pt; font-weight: bold; width: 75px;"></p>
	</form>
	<embed width="680" height="680" src="plot.svg">
	<script>
		$(function() {
			var x_Min, x_Max, y_Min, y_Max, graphWidth, graphHeight;
			graphWidth = graphHeight = 680;
			$("#picture1").attr("width", graphWidth);
			$("#picture1").attr("height", graphHeight);
			x_Min = y_Min = -10;
			x_Max = y_Max = 10;
			xGrid = yGrid = 1;
			$("#xGrid").attr("value", xGrid);
			$("#yGrid").attr("value", yGrid);
			$("#button").click(function(event) {
				event.preventDefault();
				if (fn == '') {
					fn = "0";
					fnACol = "gray"
				} else {
					fnACol = $("#color").val();
				}
				fn = $("#function").val();
				$("#picture1input").attr("value", 'setBorder(0);fontstyle="normal";initPicture(' + x_Min + ',' + x_Max + ',' + y_Min + ',' + y_Max + ');axes(' + xGrid + ',' + yGrid + ', "labels", ' + xGrid + ');stroke = fnACol;plot(fn);');
				updatePicture(0);
			});
		});
	</script>
DEMO | DOWNLOAD