JSFiddle - React, Tailwind, and code Playground

by mschock

HTML

<textarea id="data"></textarea>
<canvas id="graph" height="100"></canvas>
<div id="result"></div>

CSS

#data {
    border: 1px solid black;
    width: 89%;
    height: 50px;
}
#graph {
    border:1px solid black;
    width: 475px;
}

JavaScript

var stock_prices_yesterday = [];

(function createMockData() {
    for (var i = 0; i < 60; i++) {
        stock_prices_yesterday[i] = Math.ceil(100 * Math.random());
    }
})();

$('#data').html('data: ' + stock_prices_yesterday.join(', '));

var c = document.getElementById("graph"),
    ctx = c.getContext("2d");
for (var i = 0; i < stock_prices_yesterday.length; i++) {
    ctx.moveTo(i * 5 + 3, 100);
    ctx.lineTo(i * 5 + 3, 100 - stock_prices_yesterday[i]);
    ctx.stroke();
}

var maxPayout = 0,
    minPrice = stock_prices_yesterday[0];
for (var i = 1; i < stock_prices_yesterday.length; i++) {
    var currentPrice = stock_prices_yesterday[i],
        payout = currentPrice - minPrice;
    if (payout > maxPayout) {
        maxPayout = payout;
    }
    if (currentPrice < minPrice) {
        minPrice = currentPrice;
    }
}

$('#result').html('Max Delta: ' + maxPayout);