cubic calculator

by isaiahwint

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<center>
 The Cubic Equation<br/><br>
y=ax<sup>^3</sup>+bx^<sup>2</sup>+cx+d<br/><br/>

     <label for="a">A value</label> <input type="text" id="a" size="5" value="" /><br/>
     <br>
     <label for="b">B value</label> <input type="text" id="b" size="5" value="" /><br/>
     <br>
     <label for="c">C value</label> <input type="text" id="c" size="5" value="" /><br/>
     <br>
     <label for="d">D value</label> <input type="text" id="d" size="5" value="" /><br/>
     <br>
     <label for="xmin">Minimum x </label ><input type="text" id="xmin" value="" size="5" />&nbsp; &nbsp;
     <label for="xmax">Maximum x</label> <input type="text" id="xmax" value="" size="5" /><br/><br/>
    
<label for="calculate"><input type="button" value="Calculate" id="calculate" /></label> &nbsp; &nbsp; &nbsp; <label for="plot"><input type="button" value="Plot" id="plot" /></label>
<br/><br/>
<p id="output"> </p>    

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

JavaScript

var a = 0;
var b = 0;
var c = 0;
var d = 0;
var n = 0;
var x = new Array();
var y = new Array();
var v = new Array();
function calculateY(a, b, c, d, x) {
  return a * x * x * x + b * x * x + c * x + d;
}
function calculate() {
  a = Number($('#a').val());
  b = Number($('#b').val());
  c = Number($('#c').val());
  d = Number($('#d').val());
  var xmin = Number($('#xmin').val());
  var xmax = Number($('#xmax').val());
  var xt = 0;
  var i = 0;
  for (xt = xmin; xt <= xmax; xt++) {
    x[i] = xt;
    y[i] = calculateY(a, b, c, d, xt);
    v[i] = [x[i], y[i]];
    i++;
  }
  n = i - 1;
}
function displayValues() {
  var s = "";
  s = "y=" + a + "x<sup>^3</sup> + ";
  s += b + "x<sup>^2</sup>+" + c + "x+" + d + "<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: 'Cubic Equation Plotted',
      x: -20
    },
    xAxis: {
      title: {
        text: 'X'
      }
    },
    yAxis: {
      title: {
        text: 'Y'
      }
    },
    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();
});