Kinetic Energy Equation

by Shawn Lackey

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
		Calculation of Kinetic Energy<br/><br>
		K = 1/2mv<sup>2</sup><br/><br/>

			 Input m <input type="text" id="m" size="5" value="2"/><br/>
			 v min<input type="text" id="vmin" value="0" size="5"/>
			 v max<input type="text" id="vmax" value="10" size="5" />
		<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

// Global variables
var m = 0;
var n = 0;
var V = new Array();
var K = new Array(); 
var R = new Array();

function calculateK(m, v) {
    return 1/2 * m * v * v;
}

function calculate() {
    m = Number($('#m').val());
    var vmin = Number($('#vmin').val());
    var vmax = Number($('#vmax').val());
    var vt = 0;
    
    
    var i = 0;
    for (vt = vmin; vt <= vmax; vt++) {
        V[i] = vt;
        K[i] = calculateK(m, vt);
        R[i] = [K[i], V[i]];
        i++;
    }
    n = i - 1;
    
}

function displayValues()
{
   var s = "";
    
    s = "K = 1/2*" + m + " v<sup>2</sup><br/><br/>";
    
    for (var i = 0; i <= n; i++)
    {
        s += " K = " + K[i] + " v = " + V[i] + "<br/>";       
    }
    
    output.innerHTML = s;
}

function plotValues()
{
   calculate();
   chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Kinetic Equation',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: 'Velocity'
                }
            },
            yAxis: {
                title: {
                    text: 'KE'
                }   
            }, 
       
       plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    }
                }
            },
       
      ...