JSFiddle - React, Tailwind, and code Playground

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>

<h1>BitUSD/BTS market statistics</h1>

<div id="container">
    <div id="plot1" style="height: 400px; min-width: 500px"></div>
    <p id="processing"></p>
    <div id="results">
        <p>Start: <span id="startTime"></span>
        </p>
        <p>End: <span id="endTime"></span>
        </p>
        <p>Statistics on percent difference data for the various prices:</p>
        <table class="table table-bordered">
            <thead>
                <th>Price category</th>
                <th>&mu;</th>
                <th>&sigma;</th>
            </thead>
            <tr>
                <td>Feed</td>
                <td><span id="feedavg"></span>
                </td>
                <td><span id="feedstd"></span>
                </td>
            </tr>
            <tr>
                <td>Bid</td>
                <td><span id="bidavg"></span>
                </td>
                <td><span id="bidstd"></span>
                </td>
            </tr>
            <tr>
                <td>Ask</td>
                <td><span id="askavg"></span>
                </td>
                <td><span id="askstd"></span>
                </td>
            </tr>
        </table>
    </div>
    <div id="plot2" style="height: 400px; min-width: 500px"></div>
</div>
<p>Raw data:</p>
<pre id="rawdata">
</pre>

JavaScript

var DATA_API = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Fdelegate.ninja%2Fassets%2Ffunctions%2Ftable.php%3Ft%3Dbitusd'%20and%20xpath%3D'%2F%2Fhtml%2Fbody%2Fdiv%2Fdiv%2Ftable'&format=json&diagnostics=true&callback=process"

$.ajax(DATA_API);

var inverseBinWidth = 500; // binWidth == 1/1000 == 0.001 == 0.1%
var decimalPlace = Math.ceil(Math.log10(inverseBinWidth));
var adjustedDecimalPlace = Math.max((decimalPlace > 2) ? (decimalPlace-2) : 0, 2);

var data = [];
var cmc_series = [];
var bid_series = [];
var feed_series = [];
var ask_series = [];

var timer;
var oldBeg;
var oldEnd;
var oldBegIndx;
var oldEndIndx;

function makeGaussian(mean, sigma) {
    var C1 = 1.0 / (sigma * Math.sqrt(2 * Math.PI));
    var C2 = -1.0 / (2 * sigma * sigma);
    return function (x) {
        x = (x - mean);
        return C1 * Math.exp(C2 * x * x);
    }
};

function generateStatistics(beg, end) {
    // Find beginning and ending indices for the data subset of interest
    var begIndx = -1;
    var endIndx = -1;
    var minDiff = 0;
    var maxDiff = 0;
    for (var i = 0; i < data.length; i++) {
        var time = data[i].cmc_time.getTime();
        if (begIndx < 0 && time > beg) begIndx = i;
        else if (begIndx < 0) continue;
        
        var minVal = Math.min(bid_series[i][1], feed_series[i][1], ask_series[i][1]);
        var maxVal = Math.max(bid_series[i][1], feed_series[i][1], ask_series[i][1]);
        if (minVal < minDiff) minDiff = minVal;
        if (maxVal > maxDiff) maxDiff = maxVal;
        
        if (endIndx < 0 && time >= end) {
            if (i == 0) break;
            endIndx = i - 1;
            break;
        }
    };
    minDiff = Math.floor(minDiff * inverseBinWidth / 100);
    maxDiff = Math.ceil(maxDiff * inverseBinWidth / 100);
    if (begIndx < 0 || endIndx < 0) {
        console.log("Invalid interval!");
        return false;
    }
    if (oldBegIndx == begIndx && oldEndIndx == endIndx)...