Plotting a function graph

JavaScript FAQ | JavaScript Numbers FAQ  

Question: How do I plot a graph of a mathematical function using JavaScript?

Answer: To plot a graph of a function on your webpage, use the canvas element, as shown in the example below. The canvas element is supported in all major browsers: Firefox, Opera, Safari, Google Chrome, and Microsoft Internet Explorer 9 or newer.

Example: Here is a graph of the functions sin x (green) and cos 3x (blue).

The graph has been created using the following JavaScript code:

function fun1(x) {return Math.sin(x);  }
function fun2(x) {return Math.cos(3*x);}

function draw() {
 var canvas = document.getElementById("canvas");
 if (null==canvas || !canvas.getContext) return;

 var axes={}, ctx=canvas.getContext("2d");
 axes.x0 = .5 + .5*canvas.width;  // x0 pixels from left to x=0
 axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0
 axes.scale = 40;                 // 40 pixels from x=0 to x=1
 axes.doNegativeX = true;


function funGraph (ctx,axes,func,color,thick) {
 var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
 var iMax = Math.round((ctx.canvas.width-x0)/dx);
 var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
 ctx.lineWidth = thick;
 ctx.strokeStyle = color;

 for (var i=iMin;i<=iMax;i++) {
  xx = dx*i; yy = scale*func(xx/scale);
  if (i==iMin) ctx.moveTo(x0+xx,y0-yy);
  else         ctx.lineTo(x0+xx,y0-yy);

function showAxes(ctx,axes) {
 var x0=axes.x0, w=ctx.canvas.width;
 var y0=axes.y0, h=ctx.canvas.height;
 var xmin = axes.doNegativeX ? 0 : x0;
 ctx.strokeStyle = "rgb(128,128,128)"; 
 ctx.moveTo(xmin,y0); ctx.lineTo(w,y0);  // X axis
 ctx.moveTo(x0,0);    ctx.lineTo(x0,h);  // Y axis
It is safe to call the draw() function after the entire body of the webpage is loaded. The source code of an HTML page containing the canvas element may look like this:
<!DOCTYPE html>
<head><title>Canvas code example</title>
<script type="text/javascript">
// JavaScript source code goes here
<body onload="draw()">
<canvas id="canvas" width="502" height="108"></canvas>

Note: If you omit the DOCTYPE element at the beginning of the page, then the graphics might not show up in IE browsers: without the DOCTYPE element, IE may switch to the backward compatibility mode and treat canvas as an unsupported tag.

See also:
Mathematical functions
Mathematical constants
Mathematical and special symbols

Copyright © 1999-2012,