Ecco un codice che vi permetterà di disegnare grafici fisici e matematici anche su java script!
Anzi col codice che segue potrete anche far scegliere a chi usa il codice quale dei vari grafici, prima nascosti, mostrare. Ecco un esempio di come potrebbe venire:
<!DOCTYPE html>
<html>
<style>
body {
background-color: #9fff80;
}
</style>
<h2>GRAFICI!</h2>
<h3>
Scegli un bottone tra questi due e cliccalo
<button type="button" onclick="f1()">Grafico 1</button>
<button type="button" onclick="f2()">Grafico 2</button>
</h3>
<canvas
id="CNV" width="250" height="250" style="border:2px solid
red;background:#ff9933;">
</canvas>
<canvas
id="CNQ" width="250" height="250" style="border:2px solid
red;background:#ff9933;">
</canvas>
<script>
function f1() {
var T=[5,-3,11,-8,2,-10,12,-13,-4,10];
var ctx=CNV.getContext("2d");
var i,h,step=26,pos=0,max=Math.abs(T[0]);
var x0=0,y0=100,L=step*(T.length-1);
for(i=0;i<T.length;i++)
if(Math.abs(T[i])>max)
max=Math.abs(T[i]);
ctx.font="10px Arial";
//----------------tracciamento asse x
ctx.moveTo(x0,y0);ctx.lineTo(x0+CNV.width,y0);
ctx.stroke();
//----------------tracciamento grafico
ctx.moveTo(x0,y0-T[0]*5);
ctx.fillText(T[0],5,y0-T[0]*5);
for(i=1;i<T.length;i++){
ctx.lineTo(pos+step,y0-T[i]*5);
ctx.fillText(T[i],pos+step+5,y0-T[i]*5);
ctx.stroke();
pos=pos+step;
}}
function f2() {
var Q=[-20,1,-4,11,-3,2,-4,15,-17,-3];
var ctx=CNQ.getContext("2d");
var i,h,step=26,pos=0,max=Math.abs(Q[0]);
var x0=0,y0=100,L=step*(Q.length-1);
var sc=(CNQ.height/2-10)/max;
for(i=0;i<Q.length;i++)
if(Math.abs(Q[i])>max)
max=Math.abs(Q[i]);
ctx.font="10px Arial";
//----------------tracciamento asse x
ctx.moveTo(x0,y0);
ctx.lineTo(x0+CNQ.width,y0);
ctx.stroke();
//----------------tracciamento grafico
ctx.moveTo(x0,y0-Q[0]*5);
ctx.fillText(Q[0],5,y0-Q[0]*5);
for(i=1;i<Q.length;i++){
ctx.lineTo(pos+step,y0-Q[i]*5);
ctx.fillText(Q[i],pos+step+5,y0-Q[i]*5);
ctx.stroke();
pos=pos+step;
}
}
</script>
</body>
</html>
