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