Embedded Files
Defining an interactive graph on canvas
Defining an interactive graph on canvas
Canvas is used to draw interactive graphics in javascript. Example of drawing the line:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx)canvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphctx.beginPath(); // start drawing linectx.lineTo(0, 70); // first point on canvasctx.lineTo(50, 80);ctx.lineTo(100, 40);ctx.lineTo(150, 60);ctx.lineTo(200, 10);ctx.stroke(); // in order to show it on the canvas </script></body> </html>This produces the following result in the browser:
Input of the values with array:
<!DOCTYPE html><meta charset="utf-8"><!-- Univerza v Mariboru | Fakulteta za organizacijske vede --><!-- Laboratorij za kibernetiko in sisteme za podporo odločanju --><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx)canvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje yx[0] = 0;y[0] = 70;x[1] = 50;y[1] = 80;x[2] = 100;y[2] = 40;x[3] = 150;y[3] = 60;x[4] = 200;y[4] = 10;ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], y[i]);}ctx.stroke(); // in order to show it on the canvas </script></body> </html>Or in other format:
x = [0, 50, 100, 150, 200];y = [70, 80, 40, 60, 10];Adding random values:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br>Press F5 to refresh values<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx)canvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje y// fill the x values with integers from 0 canvas width; fill y with random numbersfor (i=0; i<canvas.width; i++) { x[i] = i; // values for x coordinate y[i] = Math.random(); // random between 0 and 1} ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], y[i] * canvas.height);}ctx.stroke(); // in order to show it on the canvas </script></body> </html>This draws random values on the canvas:
If we want to draw values between 0 and 1000 we should consider that at plot:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br>Press F5 to refresh values<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx)canvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje y// fill the x values with integers from 0 canvas width; fill y with random numbersfor (i=0; i<canvas.width; i++) { x[i] = i; // values for x coordinate y[i] = Math.random() * 1000; // random between 0 and 1000} ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/1000) * canvas.height));}ctx.stroke(); // in order to show it on the canvas </script></body> </html>Instead of 1000 we introduce a new variable (var maxGraphY = 1000;):
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br>Press F5 to refresh values<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx) var maxGraphY = 1000; // variable for maximum on y axiscanvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje y// fill the x values with integers from 0 canvas width; fill y with random numbersfor (i=0; i<canvas.width; i++) { x[i] = i; // values for x coordinate y[i] = Math.random() * 1000; // random between 0 and 1000} ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height));}ctx.stroke(); // in order to show it on the canvas </script></body> </html>In the next step, we will add scroll to move values to the left (using y.splice(0, 1); and add one value at the end y[maxGraphX] = Math.random() * 1000;:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx) var maxGraphX = 200; // same as canvas widthvar maxGraphY = 1000; // variable for maximum on y axiscanvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje y// fill the x values with integers from 0 canvas width; fill y with random numbersfor (var i=0; i<canvas.width; i++) { x[i] = i; // values for x coordinate y[i] = Math.random() * 1000; // random between 0 and 1000}function loop() { y.splice(0, 1); // on the position 0 in the vector y we cut one value y[maxGraphX] = Math.random() * 1000; // at the end of the array the new value is added ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas ctx.beginPath(); // for the start of the line for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height)); } ctx.stroke(); // in order to show it on the canvas var timerVar = setTimeout(loop, 10); // repeat function loop on 10ms} ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height));}ctx.stroke(); // in order to show it on the canvas loop(); </script></body> </html>Adding printout from left to right and provide scroll if full:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx) var maxGraphX = 200; // same as canvas widthvar maxGraphY = 1000; // variable for maximum on y axiscanvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje y// fill the x values with integers from 0 canvas width; fill y with random numbersfor (var i=0; i<canvas.width; i++) { x[i] = i; // values for x coordinate}function loop() { if (y.length == maxGraphX+1) { // if canvas size is 10x10 we have 11x11 points (starting with 0 and ending with 10) y.splice(0, 1); // on the position 0 in the vector y we cut one value y[maxGraphX] = Math.random() * 1000; // at the end of the array the new value is added } else { y.push(Math.random() * 1000); } ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas ctx.beginPath(); // for the start of the line for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height)); } ctx.stroke(); // in order to show it on the canvas var timerVar = setTimeout(loop, 10); // repeat function loop on 10ms} ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height));}ctx.stroke(); // in order to show it on the canvas loop(); </script></body> </html>Adding function addValueOrCutAndAdd:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var canvas, ctx; // create two variables for canvas and context (ctx) var maxGraphX = 200; // same as canvas widthvar maxGraphY = 1000; // variable for maximum on y axiscanvas = document.getElementById("canvas1");ctx = canvas.getContext("2d");ctx.strokeStyle = "#ff0000"; // determine red color of the graphvar x = new Array(); // ustvarimo novo polje xvar y = new Array(); // ustvarimo novo polje y// fill the x values with integers from 0 canvas width; fill y with random numbersfor (var i=0; i<canvas.width; i++) { x[i] = i; // values for x coordinate}function addValueOrCutAndAdd(yValue) { if (y.length == maxGraphX+1) { // if canvas size is 10x10 we have 11x11 points (starting with 0 and ending with 10) y.splice(0, 1); // on the position 0 in the vector y we cut one value y[maxGraphX] = yValue; // at the end of the array the new value is added } else { y.push(yValue); // if the array is not yet full, we push the new value in the array }} function loop() { addValueOrCutAndAdd(Math.random() * 1000); ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas ctx.beginPath(); // for the start of the line for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height)); } ctx.stroke(); // in order to show it on the canvas var timerVar = setTimeout(loop, 10); // repeat function loop on 10ms} ctx.beginPath();for (var i=0; i<y.length; i++) { ctx.lineTo(x[i], (canvas.height - (y[i]/maxGraphY) * canvas.height));}ctx.stroke(); // in order to show it on the canvas loop(); </script></body> </html>Transformed to the class:
<!DOCTYPE html><meta charset="utf-8"><!-- Andrej Škraba 2019 --><html><head><title>Example with graph</title> </head> <body>Example with graph<br><canvas id="canvas1" width="200" height="100" style="border:1px dashed #00c3c3"></canvas><script type="text/javascript">"use strict"; // enable classes var graph1; // variable for first graph objectclass Graph { constructor (canvasId, maxGraphX, maxGraphY) { this.maxGraphX = maxGraphX; // same as canvas width this.maxGraphY = maxGraphY; // variable for maximum on y axis this.canvas = document.getElementById(canvasId); this.ctx = this.canvas.getContext("2d"); this.ctx.strokeStyle = "#ff0000"; // determine red color of the graph this.canvasWidth = this.canvas.width; // mind capital W at Width this.canvasHeight = this.canvas.height; // mind capital H at Height this.x = new Array(); // create new Array x this.y = new Array(); // create new Array y // fill x vector; vector y is filled in real-time for (var i=0; i<this.maxGraphX+1; i++) { this.x[i] = i; // values for the x coordinate; 0, 1, 2, ... } } addValueOrCutAndAdd(yValue) { if (this.y.length == this.maxGraphX+1) { // if canvas size is 10x10 we have 11x11 points (starting with 0 and ending with 10) this.y.splice(0, 1); // on the position 0 in the vector y we cut one value this.y[this.maxGraphX] = yValue; // at the end of the array the new value is added } else { this.y.push(yValue); // if the array is not yet full, we push the new value in the array } } plot(yValue) { this.addValueOrCutAndAdd(yValue); this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // clear the canvas this.ctx.beginPath(); // for the start of the line for (var i=0; i<this.y.length; i++) { this.ctx.lineTo(this.x[i]/this.maxGraphX*this.canvasWidth, (this.canvasHeight - (this.y[i]/this.maxGraphY) * this.canvasHeight)); // for y values we multiply with canas height, eg. 0.25 * 100 = 25 } this.ctx.stroke(); } } function loop() { graph1.plot(Math.random() * 1000); var timerVar = setTimeout(loop, 10); // repeat function loop on 10ms} graph1 = new Graph("canvas1", 200, 1000); loop(); </script></body> </html>Page updated
Google Sites
Report abuse