Display chart of future spot prices

templates/assets/main.js

@@ -14,7 +14,7 @@ $(document).ready(function() {
 function serializeForm(id) {
     //
     return $(id).serializeArray()
-            .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
+        .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
 }
 
 function sendRequest() {
@@ -42,13 +42,15 @@ function sendRequest() {
         success:        function(e) {
             optionResults = e;
             updateTable();
+            updateGraph();
             let requestTime = new Date().getTime() - startTime;
-            console.log("Request time: ", requestTime);
+            console.log("Request time(s):", requestTime / 1000);
         },
     });
 }
 
 function updateTable() {
+    // TODO
     $("#results-table > tbody > tr").each(function(idx, el) {
         $($(el).children()[1])[0].innerText =
             optionResults["ClosedForm"][$($(el).children()[0]).text()].toFixed(4);
@@ -57,3 +59,83 @@ function updateTable() {
     });
 }
 
+function updateGraph() {
+    // TODO
+    var strippedData = optionResults.MonteCarlo.Levels.map(function(i) {
+        return Number(i.toFixed(0));
+    });
+
+    // Count the elements
+    var counts = {};
+    var minY = 0;
+    for (var i=0; i<strippedData.length; i++) {
+        var num = strippedData[i];
+        counts[num] = counts[num] ? counts[num] + 1 : 1;
+    }
+
+    var summaryData = [];
+    Object.keys(counts).forEach( function(key) {
+        summaryData.push({'key': key, 'value': counts[key]});
+    });
+
+    var margin = {top: 10, right: 20, bottom: 20, left: 40},
+    width = 500 - margin.left - margin.right,
+    height = 300 - margin.top - margin.bottom;
+
+    $("#right-upper").empty();
+    var svg = d3.select("#right-upper").append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    var x = d3.scaleLinear()
+        .range([0, width]);
+
+    var y = d3.scaleLinear()
+        .range([height, 0]);
+
+    x.domain([0, Math.max.apply(null, strippedData)]).nice();
+    var maxY = Object.values(counts).sort((prev, next) => next - prev)[0];
+    y.domain([0, maxY]).nice();
+
+    svg.selectAll(".bin")
+        .data(summaryData)
+        .enter().append("line")
+        .attr("class", "bin")
+        .attr("x1", function(d) { return x(d.key) })
+        .attr("x2", function(d) { return x(d.key) })
+        .attr("y1", height)
+        .attr("y2", function(d) { return y(d.value ) });
+
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom()
+                .scale(x));
+
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(d3.axisLeft()
+                .scale(y));
+
+    var logNormalLine = d3.line()
+        .x(function(d, i) { return x(d); })
+        .y(function(d) { return logNormal(d, 100, 0.4); })
+        .curve(d3.curveBasis);
+
+    svg.append("g")
+        .attr("d", logNormalLine(d3.range(x.domain()[0], x.domain()[1], 1)))
+        .attr("stroke", "blue")
+        .attr("stroke-width", 2)
+        .attr("fill", "none")
+
+}
+
+function logNormal(x, mean, stddev) {
+    var y = (1 / (x * Math.sqrt(2 * Math.PI * Math.pow(stddev, 2)))) * Math.pow(Math.E, - (Math.pow(Math.log(x) - mean, 2) / (2 * Math.pow(stddev, 2))));
+    // console.log('logNormal', x, mean, stddev, y);
+    y = isFinite(y) ? y : 0;
+    return y;
+}
+

templates/assets/styles.css

@@ -1,3 +1,18 @@
+svg {
+	font: 10px sans-serif;
+}
+
+line.bin {
+	stroke: #000;
+	stroke-width: 3px;
+}
+
+.axis path, .axis line {
+	fill: none;
+	stroke: #000;
+	shape-rendering: crispEdges;
+}
+
 body {
 	font-family: 'Poppins', sans-serif;
 	font-size: small;

templates/index.html

@@ -4,6 +4,7 @@
         <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
         <link rel="stylesheet" type="text/css" href="assets/styles.css"/>
         <script type="text/javascript" src="assets/jquery.3.2.1.js"></script>
+        <script type="text/javascript" src="assets/d3.v4.min.js"></script>
         <script type="text/javascript" src="assets/main.js"></script>
     </head>
     <body>
@@ -44,7 +45,6 @@
             </div>
             <div id="right-side">
                 <div id="right-upper">
-                    <p>Graph goes here</p>
                 </div>
                 <div id="right-lower">
                     <table id="results-table">