calculator

by davidjb95

HTML

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
Equation calculator<br/><br/>
y = ax<sup>3</sup> + bx<sup>2</sup> + cx + d<br>
Input a <input type="text" id="a" value="2"/><br/>
Input b <input type="text" id="b" value="3"/><br/>
Input c <input type="text" id="c" value="4"/><br/>
Input d <input type="text" id="d" value="5"/><br/>
X Min<input type="text" id="xmin" value="-10"/><br/>
X Max<input type="text" id="xmax" value="10"/>
<input type="button" value="Calculate" id="calculate" />
<input type="button" value="Plot" id="plot"/>
<br/>
<p id="output"></p>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>

JavaScript

var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 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())-1;
  var xmax = Number($('#xmax').val())-1;
  var xt=0;
  var i = 0;
  for(xt = xmin; xt<=xmax; xt++){
  x[i] = xt+1;
  y[i] = calculateY(a, b, c, d, xt);
  v[i] = [x[i], y[i]];
  i++;
  }
  n = i;
}
function displayValues(){
	var s = "";
  s = "Y = "+a+ "x<sup>3</sup>+"+b+"x<sup>2</sup>+"+c+"x+"+d;
  for (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: 'Quartic Equation',
                x: -20 //center
            },
            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
                            }
                        }
                    }
                }
    ...