Sample Calulcator Plotting 2

by Erik East

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<label for="a">Value <em>a</em>:</label>
					<input type="text" id="a" value="4"/><br>
          <label for="b">Value <em>b</em>:</label>
					<input type="text" id="b" value="2"/><br>
          <label for="c">Value <em>c</em>:</label>
					<input type="text" id="c" value="3"/><br>
          <label for="x">Value <em>x</em>:</label>
					<input type="text" id="x" value="1"/><br>
          <label for="xmin">Minimum x-value:</label>
					<input type="text" id="xmin" value="-10"/><br>
          <label for="xmax">Maximum x-value:</label>
					<input type="text" id="xmax" value="10"/><br>
          <input type="button" value="Calculate" id="calculate"/><br>
				<input type="button" value="Plot" id="plot"/>
        <p id="output"></p>
			<div id="plot-container"></div>

JavaScript

// Global variables
var a = 0;
var b = 0;
var c = 0;
var n = 0;
var x = new Array();
var y = new Array(); 
var v = new Array();

function calculateY(a, b, c, x) {
    return a * x * x * x + b * x * x - ( (c * x) / (a * b) );
}

function calculate() {
    a = Number($('#a').val());
    b = Number($('#b').val());
    c = Number($('#c').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, xt);
        v[i] = [x[i], y[i]];
        i++;
    }
    n = i - 1;
    
}

function displayValues()
{
   var s = "";
    
    s = "y = " + a + "x<sup>3</sup> &plus; ";
    s+= b + "x<sup>2</sup> &minus; ";
    s+= "<sup>" + c + "x</sup>&frasl;<sub>(" + a + ")(" + b + ")</sub><br><br>";
    
    for (var i = 0; i <= n; i++)
    {
        s += "(" + x[i] + ", " + y[i] + ")<br/>";       
    }
    
    output.innerHTML = s;
}

function plotValues()
{
   calculate();
   chart = new Highcharts.Chart({
            chart: {
                renderTo: 'plot-container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Quadratic 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: {
                       ...