Sample Calulcator Plotting 2

by ClarenceDowns

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
    <div class="calcForm">
      <h1>Quadratic Equation Calculator</h1>
      <h2>y = d + asin(bx - c)</h2>
      <br />

      <label for="a">Input a:</label>
      <input name="a" type="text" id="a" size="5" value="1" /><br />
      <label for="b">Input b:</label>
      <input name="b" type="text" id="b" size="5" value="1" /><br />
      <label for="c">Input c:</label>
      <input name="c" type="text" id="c" size="5" value="0" /><br />
      <label for="d">Input d:</label>
      <input name="d" type="text" id="d" size="5" value="1" /><br />
      <label for="xmin">X Min:</label>
      <input name="xmin" type="text" id="xmin" value="0" size="0" />
      <label for="xmax">X Max:</label>
      <input name="xmax" type="text" id="xmax" value="12" size="5" /><br /><br />

      <input type="button" class="button" value="Calculate" id="calculate" />
      <input type="button" class="button" value="Plot" id="plot" />
      <br /><br />
    </div>

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

CSS

.button {
    width: 7em;
    box-shadow: 2px 2px 0 rgb(255, 255, 51);
    margin-left: 1em;
    background-color: silver;
}

.calcForm {
    margin-left: 1em
}

JavaScript

var a = 0;
var b = 0;
var c = 0;
var d = 0;
var n = 0;
var x = [];
var y = [];
// This is an array of arrays. A two demensional array of x and y
var v = [];

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

function calculate() {
  var a = Number($("#a").val());
  var b = Number($("#b").val());
  var c = Number($("#c").val());
  var 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, b, c, d, xt);
    // An array of points
    v[i] = [x[i], y[i]];
    i++;
  }
  n = i - 1;
}
// Function to display the values
function displayValues() {
  var s = "";
  s = "Y = " + d + " + " + a + "sin( " + b + "x - " + c + ")<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",
      marginRight: 130,
      marginBottom: 25
    },
    title: {
      text: "Sine Function",
      x: -20 //center
    },
    xAxis: {
      title: {
        text: "X"
      }
    },
    yAxis: {
      title: {
        text: "Y"
      }
    },

    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: "rgb(255,255,0)"
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        }
      }
    },

    series: [{
      name: "Y Values",
      color: "rgb(255,255,0)",
      data: v
    }]
  });
}

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