A4_equation

Web Systems 1

by Alan Harris

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<p>
  This program is used to solve and graph the equation of Ohm's law. Ohm's law is particularly used in electrical engineering. The V refers to Voltage in Volts. The I refers to the current in Amps. The R refers to the resistance in Ohms. The I and R are
  multiplied together.

</p>

<p>
  V = I &#8729; R
</p>

I (Amps): <input type=number id="iValue" value=2 min=1 max=1000> <br> R (Ohms): <input type=number id="rValue" value=10 min=1 max=1000> <br>
<br>
<button id="Calculate">
Solve
</button>

<div id="mess">

</div>


<div id="solv"></div>

<div id="container"></div>

CSS

button:focus {
  border: 1px solid black;
  padding: 4px 4px;
}

button {
  background-color: grey;
  border: 1px solid black;
  color: white;
  padding: 4px 8px;
  text-decoration: none;
  margin: 4px 2px;
}

button:hover {
  background-color: black;
}

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

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

$('#Calculate').click(function() {
  inCheck();
  
});

function inCheck() {
	I = Number($('#iValue').val());
  R = Number($('#rValue').val());

  document.getElementById("mess").innerHTML = "";
  document.getElementById("solv").innerHTML = "";
	document.getElementById("container").innerHTML = "";

  if (I <= 1 || I >= 999) {
    document.getElementById("mess").innerHTML = "You must convert the number to Amps for calculating properly. ";
    }
  else if (R <= 1 || R >= 999) {
    document.getElementById("mess").innerHTML = "You must convert the number to Ohms for calculating properly. ";
  }
  else {
  	Sol();
    DisplayValues();
  	Plot();
  }
}

function Sol() {
  
		var xmin = 1;
    var xmax = 10;
    var xt = 0;
    
    
    var i = 0;
    for (xt = xmin; xt <= xmax; xt++) {
        x[i] = xt;
      //  y[i] = xt;
        v[i] = CalcV(I, R, xt); //the Voltage result
        val[i] = [x[i], v[i]];
        i++;
    }
    n = i - 1;
}

function CalcV(x, y, xt) {
	return x * y * xt;
}


function Plot() {
  Sol();
  graph = new Highcharts.chart({
    chart: {
      renderTo: 'container',
      type: 'line',
      marginRight: 130,
      marginBottom: 25
    },
    title: {
      text: 'Ohms Law',
      x: -20 //center
    },
    xAxis: {
      title: {
        text: 'I'
      }
    },
    yAxis: {
      title: {
        text: 'R'
      }
    },

    plotOptions: {
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: true,
              lineColor: 'rgb(100,100,100)'
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        }
      }
    },

    series: [{
      name: 'Voltage',
      color: 'rgba(223, 83, 83, .5)',
      data: val
    }]
  })

}

function DisplayValues() {
	var a...