JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset style="text-align:left;">
    <legend><b>Standard Test</b></legend>
    <div style="display:inline;">
        <button id="button_small">Small Chart</button>
        <button id="button_medium">Medium Chart</button>
        <button id="button_large">Large Chart</button>
        <button id="button_super_large">Super Large Chart</button>
        <button id="button_super_large_10_points">Super Large Chart. 10 points</button>
    </div>
</fieldset>
<div></div>
<fieldset style="text-align:left;">
    <legend><b>Custom Test</b></legend>
    <div style="display:inline;">
        <span>Points:</span>
        <input id="points" style="width:50px;"/>
        <span>Width(px):</span>
        <input id="width"  style="width:50px;"/>
        <span>Height(px):</span>
        <input id="height"  style="width:50px;"/>
        <span>Polling Interval(ms):</span>
        <input id="polling"  style="width:50px;"/>
        <button id="button_custom">Run Custom Test</button>
    </div>
</fieldset>
<fieldset style="text-align:left;">
    <legend><b>Performance</b></legend>
    <div id="performance">Wait for the next chart update and see stats</div>
    <div id="info">Performance result</div>
    <div id="info1"></div>
</fieldset>
<!-- 3. Add the container -->
<div id="container" style="margin: 0 auto">
</div>

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

JavaScript

var startTime = (new Date()).getTime();
//start time for redraw
var start = (new Date()).getTime();
//finish time for redraw
var finish = (new Date()).getTime();
var charts;
var polInterval = 1000;
var isStarted = false;
var pointsCount = 10;
var median = [];
var updateTimer;
var seriesLength;
var chartStarted;
var randomData = [];
var containerWidth = 1400;
var containerHeight = 1100;
var testType;
//            debug.log('Started...');
// the button action
$(document).ready(function() {
    $button_small = $('#button_small');
    $button_small.click(function() {
        pointsCount = 100;
        polInterval = 1000;
        containerWidth = 500;
        containerHeight = 300;
        testType = $button_small.text();
        runFromButton();
    });

    $button_medium = $('#button_medium');
    $button_medium.click(function() {
        pointsCount = 15000;
        polInterval = 5000;
        containerWidth = 700;
        containerHeight = 500;
        testType = $button_medium.text();
        runFromButton();
    });
    $button_large = $('#button_large');
    $button_large.click(function() {
        pointsCount = 15000;
        polInterval = 5000;
        containerWidth = 900;
        containerHeight = 700;
        testType = $button_large.text();
        runFromButton();
    });
    $button_super_large = $('#button_super_large');
    $button_super_large.click(function() {
        pointsCount = 15000;
        polInterval = 5000;
        containerWidth = 1100;
        containerHeight = 900;
        testType = $button_super_large.text();
        runFromButton();
    });
    $button_super_large_10_points = $('#button_super_large_10_points');
    $button_super_large_10_points.click(function() {
        pointsCount = 10;
        polInterval = 1000;
        containerWidth = 1400;
        containerHeight = 1100;
        testType = $button_super_large_10_points.text();
        runFromButton();
    });
    $button_custom = $('#button_custom');
   ...