JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
	<section>
   <h4>Sustav prvog reda</h4> 
   <br />Unesite parametre sustava:
   <br />Vremenska konstanta T: <input type="text" id="vremKonst" /> Pojačanje sustava K: <input type="text" id="pojSustava" /> 
   <form>
     <input id="firstOrder" type="button" value="Calculate">
		 <input id="drawChart" type="button"  value="Draw">
      </form>
       <div id="chartContainer" style="height: 360px; width: 100%;">

JavaScript

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: "Graph"
      },
       data: [
      {
        type: "spline",
        dataPoints: dps
      }
      
      ]
    });
    
		// Calculate x and y values    
    document.getElementById("firstOrder").onclick = function() { 
      famname = new Array(100);
      T = document.getElementById("vremKonst").value;
      K = document.getElementById("pojSustava").value;

      for(t=0;t<100;t+=2.5)
      {
        M=-t/T;
        y=K*(1-Math.exp(M));
        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();
    }

})();