calculator/plot

by Taylor Zimmerman

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<h1>Cosine Calculator and Graph</h1><br>
<fieldset>

<legend>Y = (a)cos(x) + d<br><br></legend>

  
Input amplitude: <input type="text" id="a" size="5" value="6"/>

Input Vertical Shift: <input type="text" id="d" size="5" value="3"/>
<br/><br>

Min<input type="text" id="xmin" value="-10" size="5"/>
Max<input type="text" id="xmax" value="10" size="5" />
<br/><br/>
    
<input type="button" value="Calculate" id="calculate" />
<input type="button" value="Plot" id="plot" />
</fieldset>
<br/><br/>
<p id="output"> </p>  

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

JavaScript

var n = 0;
var x = new Array();
var y = new Array(); 
var v = new Array();

function calculateY(c,x) {
    return a*(Math.cos(x)) + d;
}

function calculate() {

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

function displayValues()
{
   var s = "";
    
    s = "Y = " + a + "cos(x) + " + d;
    s+= "<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',
                
            },
            title: {
                text: 'Cosine Graph',
               
            },
            xAxis: {
                title: {
                    text: 'X'
                }
            },
            yAxis: {
                title: {
                    text: 'Y',
                }   
            }, 
       
       plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(0,0,0,0)',
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    }
                }
            },
       
       series: [{
                name: "Y= (" + a + ')Cos(x) + ' + d,
        ...