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>

<p>Choose BitAsset: 
    <a href="#" onclick="loadData(assets.usd)">BitUSD</a>
    <a href="#" onclick="loadData(assets.btc)">BitBTC</a>
</p>
<h1><span id="bitasset">BitAsset</span>/BTS market statistics</h1>
<p id="loading">Loading data...</p>
<div id="container" style="width: 100%">
    <div id="plot1"></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 id="plot2"></div>
    </div>
    <p>Raw data:</p>
    <pre id="rawdata">
    </pre>
</div>

JavaScript

var DATA_API_PREFIX = "http://delegate.ninja/assets/functions/alldata_callback.php?callback=process&t=";

var CHART_HEIGHT = 400;
var CHART_MIN_WIDTH = 500;

var assets = {
    usd: {id: "bitusd", name: "BitUSD"},
    btc: {id: "bitbtc", name: "BitBTC"}
};

function loadData(asset) {
    $("#container").hide();
    $("#loading").show();
    $("#bitasset").html(asset.name);
    $.ajax(DATA_API_PREFIX + asset.id);
}

$(document).ready(function() {
   loadData(assets.usd); 
});

$(window).resize(function() {
    var width = Math.max($("#container").width(), CHART_MIN_WIDTH);
    if (plot1 != undefined)
        plot1.setSize(width , CHART_HEIGHT);
    if (plot2 != undefined)
        plot2.setSize(width, CHART_HEIGHT);     
});

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 plot1;
var plot2;
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 /...