Web Systems - Assignment #4

by Mike Kerney

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.3/highcharts.js"></script>
<script src="exporting.js"></script>
<h1>
  Logistic Differential Equation - Growth Model With limits <br/> f(x)=c/( 1+ae^(−bx))


</h1>

<body>
  This function shows the growth of something as it relates to time, and with defined limits. The y value at a point in time is the amount of growth, while x represents time passed. This function would be used to show things like flu spread
  in a school with the limit being the amount of people that could possibly be infected, or population growth of people or animals with finite resources. In these examples, the y values would be rounded up as population figures would be whole numbers.
  <p>
    Please enter the maximum number of days to look at (x-axis max, enter larger number to see full graph): <br/><input type="text" id="days" /><br/>
    <br/>Please enter the maximul number for growth (The maximum something could possibly grow to): <br/> <input type="text" id="max"> <br/><br/> Please enter the growth rate constant (usually <1): <br/> <input type="text" id="rate"><br/> 

  </p>
  <input type="button" value="Calculate" id="calculate" />
  <input type="button" value="Plot" id="plot" />

  <br/><br/>
  <p id="output"> </p>

  <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>

JavaScript

var a = 0;
var e = 0;
var b = 0;
var c = 0;
var n = 0;
var y = new Array();
var x = new Array();
var v = new Array();

function calculateY(x, b, c, e, a) {

  var exp = -(b * x);
  return (c / (1 + (a * Math.pow(e,exp))));

}

function calculate() {

  b = Number($('#rate').val());
  c = Number($('#max').val());
  a = c - 1;
  e = Math.E;


  var xmin = 0;
  var xmax = Number($('#days').val());
  var xt = 0;


  var i = 0;
  for (xt = 0; xt <= xmax; xt++) {
    x[i] = xt;

    y[i] = calculateY(xt, b, c, e, a);
    v[i] = [x[i], y[i]];
    i++;
  }
  n = i - 1;

}

function displayValues() {
  var s = "";

  s = "f(x) = " + c + "/<br/>";
  s += "(1+(" + a + ")e^(-" + b + "* x))<br/><br/>";

  for (var i = 0; i <= n; i++) {
    s += " X = " + x[i] + " Y = " + y[i] + "<br/>";
  }

  output.innerHTML = s;
}

function plotValues() {
  calculate();
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      marginRight: 130,
      marginBottom: 25
    },
    title: {
      text: 'Differential Equation: Growth Model With Limit',
      x: -20 //center
    },
    xAxis: {
      title: {
        text: 'Days'
      }
    },
    yAxis: {
      title: {
        text: 'Growth'
      }
    },

    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: 'rgb(100,100,100)'
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        }
      }
    },

    series: [{
      name: 'Y Values',
      color: 'rgba(223, 83, 83, .5)',
      data: v
    }]
  })
}

$('#calculate').click(function() {
  calculate();
  displayValues();
});

$('#plot').click(function() {
  calculate();
  plotValues();
});