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>
            <tr>
                <td>Spread</td>
                <td><span id="spreadavg"></span>
                </td>
                <td><span id="spreadstd"></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/500 == 0.002 == 0.2%
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 extremes = {
        feed: {min: 0, max: 0},
        bid: {min: 0, max: 0},
        ask: {min: 0, max: 0},
        spread: {min: 0, max: 0}
    };
    var updateExtremes = function(range, val) {
        if (val < range.min) range.min = val;
        if (val > range.max) range.max = val;
    };
    var finalizeExtremes = function(range) {
        range.min = Math.floor(range.min * inverseBinWidth / 100);
        range.max = Math.ceil(range.max * inverseBinWidth / 100);
    }
    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;
        
        updateExtremes(extremes.feed, feed_series[i][1]);
        updateExtremes(extremes.bid, bid_series[i][1]);
        updateExtremes(extremes.ask, ask_series[i][1]);
        updateExtremes(extremes.spread, spread_series[i][1]);
        
        if...