Kinetic Calculator

by Shawn Lackey

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Kinetic Energy Calculator
<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

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 str = "";

    str = "K = 1/2*" + m + " v<sup>2</sup><br/><br/>";

    for (var i = 0; i <= n; i++) {
        str += " K = " + K[i] + " v = " + V[i] + "<br/>";
    }

    output.innerHTML = str;
}

function plotValues() {
    calculate();
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Kinetic Energy 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
                        }
                    }
                }
            }
        },

        series: [{
            name: 'KE Values',
            color: 'rgba(223, 83, 83, .5)',
            data: R
        }]
    });
}

$(document).ready(function () {
    $('#calculate').click(function () {
       ...