The JavaScript Source: Math Related: Function Grapher

Home

Math Related

Function Grapher

Graphs any function you enter on the scale of your choice, assuming you use the correct JavaScript syntax. For example, to use Cos x, use Math.cos(x). Or, for x^2, use Math.pow(x, 2), etc.

The JavaScript Source: Math Related: Function Grapher (Function Page)
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!


  <HEAD> <SCRIPT LANGUAGE="JavaScript">      </script> </HEAD>  <BODY> <center> <form> <table border=0 bgcolor="#E6E6E6" cellpadding=3 cellspacing=0> <tr> <td colspan=2> <font face="Arial" size="2">Function (JavaScript syntax)<br> <input type=text name=graph size=20 maxlength=40 value="Math.cos(x)"> <p> <td rowspan=2 valign=middle align=center> <input type=button value="Plot" name=Plot onClick="drawGraph(this.form)"> </td> </tr> <tr> <td nowrap> <font face="Arial" size="2">X min<br> <input type=text name=minX size=4 maxlength=3 value="-10"> </font> </td> <td nowrap> <font face="Arial" size="2">X max<br> <input type=text name=maxX size=3 maxlength=3 value="10"> </font> </td> </tr> </table> </form> </center> 
Did you use this script?  Do you like this site?  Please link to us!

The JavaScript Source: Math Related: Function Grapher (Draw Graph Page)
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!


  <html> <head> </head> <style> .point { position: absolute; } </style> <script> function getParams() { var idx = document.URL.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<pairs.length; i++) { nameVal = pairs[i].split('='); params[nameVal[0]] = nameVal[1]; } } return params; } dotCode = '<div class="point" id="pdot_id"><img src="graph.gif" width="1" height="pic_height" alt="pic_alt"></div>\n'; xCode = '<div class="point" id="xAxis"><table border="0" width="x_width" cellspacing="0" cellpadding="0"><tr><td width="100%" bgcolor="#000000"><img src="espace.gif" width="1" height="1"></td></tr></table></div>\n'; yCode = '<div class="point" id="yAxis"><table border="0" height="y_height" cellspacing="0" cellpadding="0"><tr><td width="100%" bgcolor="#000000"><img src="espace.gif" width="1" height="1"></td></tr></table></div>\n'; backCode = '<div class="point" id="background"><table border="0" height="back_height" width="back_width" cellspacing="0" cellpadding="0"><tr><td width="100%" bgcolor="#EEEEEE"> </td></tr></table></div>\n'; if (navigator.appName == 'Netscape') { leftCode = 'document.obj_id.left = '; topCode = 'document.obj_id.top = '; } else { leftCode = 'document.all.obj_id.style.left = '; topCode = 'document.all.obj_id.style.top = '; } params = getParams(); fct = unescape(params["graph"]); xMin = parseFloat(params["minX"]); xMax = parseFloat(params["maxX"]); nbXs =200; nbYs = 200; maxYpos = 225; minXpos = 25; x = xMin; yZero = Math.abs(eval(fct)); yMax = yZero; yMin = yZero; datas = new Array(); deltaX = (xMax - xMin) / nbXs; i = 0; while (x <= xMax) { y = eval(fct); datas[i] = x + ':' + y; yMax = Math.max(y, yMax); yMin = Math.min(y, yMin); yZero = Math.min(yZero, Math.abs(y)) x+= deltaX; i++; } deltaY = nbYs / (yMax - yMin); yPos = new Array(); for (i=0; i<datas.length; i++) { yPos[i] = maxYpos - (((datas[i].split(':'))[1] - yMin) * deltaY); } document.write(backCode.replace(/back_width/, nbXs).replace(/back_height/, nbYs)); eval(leftCode.replace(/obj_id/, 'background') + minXpos); eval(topCode.replace(/obj_id/, 'background') + (maxYpos - nbYs)); if ((xMin * xMax) < 0) { document.write(yCode.replace(/y_height/, nbXs)); eval(leftCode.replace(/obj_id/, 'yAxis') + (minXpos - (xMin * (nbXs/(xMax - xMin))))); eval(topCode.replace(/obj_id/, 'yAxis') + (maxYpos - nbYs)); } if ((yMin * yMax) <= 0) { document.write(xCode.replace(/x_width/, nbYs)); eval(leftCode.replace(/obj_id/, 'xAxis') + minXpos); eval(topCode.replace(/obj_id/, 'xAxis') + (maxYpos - ((yZero - yMin) * deltaY))); } for (i=1; i<(datas.length-1); i++) { picHeight = Math.abs((yPos[i-1] - yPos[i]) + (yPos[i] - yPos[i+1])) / 2; YDPos = yPos[i] - (Math.round(picHeight) / 2); document.write(dotCode.replace(/dot_id/, i).replace(/pic_height/, Math.ceil(picHeight)).replace(/pic_alt/, datas[i])); eval(leftCode.replace(/obj_id/, 'p' + i) + (minXpos + i)); eval(topCode.replace(/obj_id/, 'p' + i) + YDPos); } </script> <body bgcolor="#FFFFFF"> </body> </html>  
Did you use this script?  Do you like this site?  Please link to us!

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency Intel eBook: Managing the Evolving Data Center Microsoft Article: BitLocker Brings Encryption to Windows Server 2008 Symantec eBook: The Guide to E-Mail Archiving and Management Microsoft Article: RODCs Transform Branch Office Security Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program		Avaya Article: Advancing the State of the Art in Customer Service Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization HP Webcast: Disaster Recovery Planning Go Parallel Video: Performance and Threading Tools for Game Developers		HP Video: StorageWorks EVA4400 and Oracle HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control IBM Energy Efficiency eKIT: Learn How to Reduce Costs 30-Day Trial: SPAMfighter Exchange Module		Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All Featured Algorithm: Intel Threading Building Blocks - parallel_reduce		HP Demo: StorageWorks EVA4400 MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES