JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
  
  <div id="server-latency"></div>

JavaScript

function server_request_time(server, cb) {
	const start_time = new Date().getTime();
	var data = {};
    jQuery.get('http://' + server + '-az01', data, 
        function(data, status, xhr) {
            var request_time = new Date().getTime() - start_time;
            cb(request_time);
        }
    );
}


function server_latency(server, cb) {
	server_request_time(server, function(request_time_1) {
		server_request_time(server, function(request_time_2) {
			server_request_time(server, function(request_time_3) {
				server_request_time(server, function(request_time_4) {
    			cb((request_time_1+request_time_2+
          		request_time_3+request_time_4)*0.25);
        });
      });
    });
  });
}
function server_latency_precise(server, cb) {
	server_latency(server, function(request_time_1) {
		server_latency(server, function(request_time_2) {
			server_latency(server, function(request_time_3) {
				server_latency(server, function(request_time_4) {
    			cb((request_time_1+request_time_2+
          		request_time_3+request_time_4)*0.25);
        });
      });
    });
  });
}

var latencies = [
   /* { y: 's1', latency: 100 } */
  ];
  
function diagnose_latecy_time() {
  server_latency_precise('s24', function(latency) {
    latencies.push({ y: 's24', latency: latency });
  });
  server_latency_precise('s13', function(latency) {
    latencies.push({ y: 's13', latency: latency });
  });
  server_latency_precise('s19', function(latency) {
    latencies.push({ y: 's19', latency: latency });
  });
}
diagnose_latecy_time();

setTimeout(function() {
  Morris.Bar({
    element: 'server-latency',
    data: latencies,
    xkey: 'y',
    ykeys: ['latency'],
    labels: ['Задержка отклика сервера']
  });
}, 2107);