JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <p>This is a simple chart proving each single Ext.Ajax call is not affected by all other calls. It's all depends on the server. The ending dots should be either in a beautiful diagonal line, or scattered (server issue)</p>
    <div id="funchart"></div>
    <p style="float:right;"><input type="button" value="Run Again" id="run-again" /></p>
    <h2>Legend</h2>
    <div class="legend">
        <div><div class="dot"></div>One Starting Call</div>
        <div><div class="dot red"></div>One Ending Call</div>
    </div>
</div>

CSS

body{ font-family: tahoma, sans-serif; font-size: 10px;}
p{ font-size: 11px;}
h2{ font-size: 16px; margin: 0 0 5px;font-weight:bold;}

.wrapper{
    width: 540px;
}

input{ padding: 5px;}

#funchart{
    position: relative;
    height: 300px;
    margin: 10px 0px;
}

.dot{
    position: absolute;
    width: 12px;
    height: 12px;
    background-color:#280;
    text-align:center;
    color:#fff;
}

.dot.red{
    background-color:#700;
}

.line{
    width: 1px;
    height: 300px;
    background:#ccc;
    position: absolute;
    top: 0px;
}

.legend{
    font-size: 11px;
}
.legend>div{
    padding-left: 17px;
    position: relative;
    margin-bottom: 3px;
}
.legend>div .dot{
    top: 0px; left: 0px;
}

JavaScript

var Sys = {
    //Numbering
    c: 1,
    
    //The ratio of 100ms to 1px
    r: 1/8,
    
    //The interval between calls
    p: 180,
    
    //Total of test items
    t: 15,
    
    start: new Date(),
    fc: Ext.get('funchart'),
    
    //Memorizing all the requests so we can quit all in once
    requests: [],
    
    //the intervals
    runners: [],
    
    /**
     * Get MS
     */
    ms: function() {
        var me = this;
        return (new Date()).getTime() - me.start.getTime();
    },
    
    /**
     * Initialize funchart
     */
    init: function() {
        var me = this;
        for (var i = 0 ; i < me.t+10 ; i++) {
            me.fc.createChild({cls: 'line', style: 'left:'+me.p*i*me.r+'px'});
        }
        Ext.getBody().down('.legend').createChild({
            tag: 'p',
            html: 'One gray line equals to '+me.p+' ms.'
        });
        
        Ext.get('run-again').on('mouseup', function() {
            me.reset();
        });
    },
    
    /**
     * Make one request
     */
    call: function() {
        var me = this;
        
        me.fc.createChild({cls: 'dot', style: 'top:0px;left:'+me.ms()*me.r+'px;', html: me.c});
        me.requests.push(Ext.Ajax.request({
            url: '/echo/json/',
            success: function(r) {
                var rid = r.requestId;
                me.fc.createChild({cls: 'dot red', style: 'top:'+(rid*14)+'px;left:'+me.ms()*me.r+'px;', html:rid});
            }
        }));
        
        me.c++;
    },
    
    /**
     * Run the system
     */
    run: function() {
        var me = this;
        for (var i = 0 ; i < me.t ; i++) {
            me.runners.push(setTimeout(function() {
                Sys.call();
            }, me.p*i));
        }
    },
    
    reset: function() {
        var me = this;
        
        //Abort all current requests
        Ext.each(me.requests, function(req) {
            Ext.Ajax.abort(req);
        });
        
        //Cancel off all runners
   ...