A4 Web1 Plotting

by Mike Kerney

HTML

<script src="https://www.highcharts.com"></script>
<script src="exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!DOCTYPE html lang="en">
<html>
	<head>
		<title> Assignment 3 Equation Calculator and Graph</title>
		<h1> Assignment 3 Equation Calculator and Graph</h1>
		<h2> Select points to display Exponential Graph y = A<sup>b</sup> </h2>
	</head>
	<body>
		<form name="formcalc">
		Base value for this Exponential Graph is set at 2
		<br/>
		Enter value for A: <input type="text" id="e" name="exponent" size="5">
		<br/>
		<br/>
		Exponent min: <input type="text" id="xmin" value="1" size="5"/>
		Exponent max: <input type="text" id="xmax" value="10" size="5"/>
		<br/>
		<br/>
		<br/>
		<input type="button" value="Calculate" id="calculate" />
		<input type="button" value="graph" onClick="plot()">
		<br/>
		<br/>
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		
		<p id="output"> </p>  
		<br/>
		<br/>
		<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
		
		</form>

JavaScript

//global variables
		var e = 0;
		var x = [];
		var y = [];
		var v = [];
		
		function calculateY(x,e)
		{
		return  Math.pow(e,x); 
		}
		
		function calculate()
		{
		e = Number($('#e').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(xt,e);
        v[i] = [x[i], y[i]];
        i++;
    }
		n = i - 1;
    
	}
	
	function displayValues()
	{
		var s = "";
    
		s = "Y = 2" + "<sup>e</sup>";
		
		for (var i = 0; i <= n; i++)
    {
        s += " X = " + x[i] + " Y = " + y[i] + "<br/>";       
    }
    
    output.innerHTML = s;
}
		function plot()
		{
		calculate();
		chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Exponential Equation',
                x: -20 //center
            },
            xAxis: {
                title: {
                    text: 'X'
                }
            },
            yAxis: {
                title: {
                    text: 'Y'
                }   
            }, 
       
       plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    }
                }
            },
       
       series: [{
                name: 'Y Values',
               ...