COP4813

Assignment 4

by suttonrobb

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
Sine and Cosine Wave Calculator<br/><br/>
y = a*sin(bx+c)+d<br/>
y = a*cos(bx+c)+d<br/><br/>

Input a <input type="text" id="a" size="5" value="1"/><br/>
Input b <input type="text" id="b" size="5" value="0.3"/><br/>
Input c <input type="text" id="c" size="5" value="3"/><br/>
Input d <input type="text" id="d" size="5" value="-1"/><br/>
x Min <input type="text" id="xmin" size="5" value="-10"/>
x Max <input type="text" id="xmax" size="5" value="10"/><br/><br/>

<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>

JavaScript

var a = 0;
var b = 0;
var c = 0;
var d = 0;
var n = 0;
var x1 = new Array();
var y1 = new Array();
var v1 = new Array();
var x2 = new Array();
var y2 = new Array();
var v2 = new Array();

function calculateY_sin(a, b, c, d, x) {
	return a * Math.sin(b * x + c) + d;
}

function calculateY_cos(a, b, c, d, x) {
	return a * Math.cos(b * x + c) + 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++) {
  	x1[i] = xt;
    x2[i] = xt;
    y1[i] = calculateY_sin(a, b, c, d, xt);
    y2[i] = calculateY_cos(a, b, c, d, xt);
    v1[i] = [x1[i], y1[i]];
    v2[i] = [x2[i], y2[i]];
    i++;
  }
  n = i - 1;
}

function displayValues() {
	var s = "";
  var t = "";
  
  s = "y = " + a + " sin(";
  s += b + "x + " + c + ") + " + d + "<br/><br/>";
  
  t = "y = " + a + " cos(";
  t += b + "x + " + c + ") + " + d + "<br/><br/>";
  
  for (var i = 0; i <= n; i++) {
  	s += " x = " + x1[i] + " y = " + y1[i] + "<br/>";
  }
  
  for (var i = 0; i <= n; i++) {
  	t += " x = " + x2[i] + " y = " + y2[i] + "<br/>";
  }
  output.innerHTML = s + "<br/>" + t + "<br/>";
}

function plotValues() {
	calculate();
  chart = new Highcharts.Chart({
  	chart: {
    	renderTo: 'container',
      type: 'line',
      marginRight: 100,
      marginBottom: 100
    },
    title: {
    	text: 'Sine and Cosine Wave Equation',
      x: 0
    },
    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
            }
    ...