JSFiddle - React, Tailwind, and code Playground

by jonasbui14

JavaScript

jQuery( document ).ready(function( $ ) {
	 setTimeout(function(){
            var dataPoints = [];
            var count = 0;
            var end_count = 0;
            var end_point = 0;
            var chart = new CanvasJS.Chart("chartContainer", {
    	        theme: "theme4",
    	        zoomEnabled:true,
    	        exportEnabled: true,
    	        zoomType: "xy",
    	        animationEnabled: true,
    	        animationDuration: 5,
    	        axisX:{
    	        	minimum: 0,
    	        	title: "Execution Time",
    	        	 },
    	        axisY:{
    				minimun: 0,
    				title: "Response Time in millisecond"
    				},
    	        title: {
    	            text: "Response Time Over Time"
    	        },
    	        data: [
    	        {
    	            type: "line",
    	            lineThickness: 2,
    	            dataPoints: []
    	        }]
            });

            // Ajax request for getting JSON data
            //Replace data.php with your JSON API's url
            $.getJSON("https://api.myjson.com/bins/k2rm5", function (data) {
            	end_point = data.length - 10;
                for (var i = 0; i < 3; i++) {

                    dataPoints.push({ label: data[i].timeStamp, y: parseInt(data[i].allThreads) });
                    
                }
                count = 3;
                chart.options.data[0].dataPoints = dataPoints;
                chart.render();
                updateChart();
            });
            
            function updateChart() {
            	end_count = count + 2;
        		$.getJSON("https://api.myjson.com/bins/k2rm5", function(data) {
        			for (var i = count; i < end_count; i++){
        			count++;
        			dataPoints.push({
        			label: data[i].timeStamp,
        			y: parseInt(data[i].allThreads),
        			});
        		}
        		chart.render();
        		setTimeout(function(){updateChart()}, 1000);
        	});
        	}            
	 },20000);
        });