JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="section">
<h1>Sustav prvog reda</h1>
<br />Unesite parametre sustava:
<br />Vremenska konstanta T: <input type="text" id="vremKonst" /> Stupanj prigušenja(Zeta) Z: <input type="text" id="stupanjPrig" />
<form>
<input id="secondOrder" type="button" value="Izračunaj">
<input id="drawChart" type="button" value="Nacrtaj">
</form>
</div>
<div id="chartContainer" style="height: 360px; width: 1100px;">
</html>
JavaScript
// Write JavaScript here
window.onload = (function () {
var famname, T, K, y, M;
var chart, dps = [];
//Initializing chart on window.onload
chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
zoomType: "xy",
title:{
text: "Sustav drugog reda"
},
data: [
{
type: "spline",
dataPoints: dps
}
]
});
// Calculate x and y values
document.getElementById("secondOrder").onclick = function() {
famname = new Array(100);
T = document.getElementById("vremKonst").value;
z = document.getElementById("stupanjPrig").value;
var wn,x,l,wd,d,r,na,nak,u1,u2,s1,s2;
wn=1/T;
for(t=0;t<100;t+=2.5)
{
if(z===0)
{
x=wn*t;
y=1-Math.cos(x);
famname[t]=y;
}
if(z==1)
{
x=-wn*t;
y=(1-Math.exp(x)*(1-x));
famname[t]=y;
}
if(z<0)
{
r=wd*t;
d=1-(z*z);
wd=wn*Math.sqrt();
l=wn*t*z;
y=(1-Math.exp(-l)*(Math.cos(r)+((z*wn)/wd)*Math.sin(r)));
famname[t]=y;
}
else
{
na=(z*z)-1;
nak=Math.sqrt(na);
s1=wn*(-z+nak);
s2=wn*(-z-nak);
u1=s1*t;
u2=s2*t;
y=(1+(1/na)*(s2*Math.exp(u1))-s1*Math.exp(u2));
famname[t]=y;
}
}
var vrijed = new Array(100);
for(p=0;p<100;p++) {
vrijed[p]=p;
}
//updating chart dataPoints
dps = [];
for(var i = 0, j=0; j < famname.length; i++, j+= 2.5) {
dps.push({ x: vrijed[i], y: famname[j] });
}
chart.options.data[0].dataPoints = dps;
}
// draw chart
document.getElementById("drawChart").onclick = function () {
chart.render();
}
})();