Flot Example

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE < 9).

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<h1>PID Example</h1> 
<p>
 speed and set speed
</p> 
    <div id="placeholder" style="width:600px;height:300px;"></div>
<p>
   force and demanded force
</p>
<div id="placeholder1" style="width:600px;height:300px;"></div>
<p>
   acceleration
</p>
    <div id="placeholder2" style="width:600px;height:300px;"></div>

JavaScript

var PID = function pid(Kp, Ki, Kd) {
  this.Kp = Kp;
  this.Ki = Ki;
  this.Kd = Kd;
  this.integral = 0;
  this.previousError = 0;
  this.bias = 0;

	this.update = function(dt, setValue, measuredValue) {
    var error = setValue - measuredValue;
		this.intgral += error*dt;
    var derivative = (error - this.previousError)/dt;
    this.previousError = error;
    return this.Kp*error + this.Ki*this.integral + this.Kd*derivative;
  }

}


limit = function(val, limit) {
  if(val > limit)
    return limit;
  return val;
}

var Car = function Car(mass, engForce) {
  this.m = mass;
  this.Fmax = engForce;
  this.Cd = 0.29;
  this.a = 0;
  this.v = 0;
  this.curF = 0;
  this.spoolupRate = 50; // 10 N per minute
  this.update = function(dt, setF) {
    if(this.curF < setF && this.curF < this.Fmax)
      this.curF += this.spoolupRate*dt;
    else if(this.curF > setF)
      this.curF -= this.spoolupRate*dt;
  }
}

$(function () {
    var pid1 = new PID(28, 1, 0);
    var car = new Car(300, 2500); // 300kg, 1kN
    var d1 = [];
    var d2 = [];
    var d3 = [];
    var d4 = [];
    var d5 = [];
    var setSpd = 100;
    car.v = 0
    const dt = 0.066;
    for (var t = 0; t < 100; t += dt) {
        var demandF = pid1.update(dt, setSpd, car.v);
        car.update(dt, demandF)
        car.a = (car.curF - car.Cd * car.v) / car.m;
        car.v += car.a * dt;
        d1.push([t, car.v]);
        d2.push([t, car.a]);
        d3.push([t, setSpd])
        d4.push([t, demandF]);
        d5.push([t, car.curF]);
    }
 
    $.plot($("#placeholder"), [ d1, d3 ]);
    $.plot($("#placeholder1"), [ d4, d5 ]);
    $.plot($("#placeholder2"), [ d2 ]);
});