Web Design 1 Assignment 4 with graph

by Jake Jernigan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<h1>
  Sine Equation Calculator</h1>
Y= (a)sin(bx+c)+d<br><br> Amplitude (Y-min and Y-max):
<input type="text" id="a" size="3" value="1" /><br> Cycle/Period Length <br>(rate at which the cylce repeats):
<input type="text" id="b" size="3" value="1" /><br> Horizontal shift:
<input type="text" id="c" size="3" value="0" /><br> Vertical shift:
<input type="text" id="d" size="3" value="0" /><br> Domain (X-min and X-max):<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>

<p id="output">
</p>

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

JavaScript

//Global Variables
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var x = [];
var y = [];
var v = [];

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

function calculate() {
  //converts text to numerical values
  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;
  //loops through x values 1 at a time and rounds to 2 decimals
  for (xt = xmin; xt <= xmax; xt++) {
    x[i] = xt;

    y[i] = calculateSine(a, b, c, d, xt);
    //.toFixed(2)
    v[i] = [x[i], y[i]];
    i++;
  }
  n = i - 1;
}

function displayValues() {
  var s = "";
  s = "Y = (" + a + ")sin(" + b + "x" + " + " + c + ") + " + c + "<br><br>";
  for (var i = 0; i <= n; i++) {
    s += " X = " + x[i] + " Y = " + y[i] + "<br>";
  }
  output.innerHTML = s;
}

function plotValues() {
  var myChart = Highcharts.chart({
    chart: {
      renderTo: 'container',
      type: 'spline'
    },
    title: {
      text: 'Sine Graph'
    },
    subtitle: {
      text: "Y = (" + a + ")sin(" + b + "x" + " + " + c + ") + " + c + "<br><br>"
    },

    xAxis: {
      text: "X"
    },
    yAxis: {
      title: {
        text: 'Y'
      }
    },
    series: [{
      name: 'values',
      data: v
    }]
  });
}

$('#calculate').click(function() {
  calculate();
  displayValues();
});

$('#plot').click(function() {
  calculate();
  plotValues();
});