JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">Loading...</div>
JavaScript
//Ajax emulator
$.ajax = function (options) {
var r = function () {
return Math.random() * 100;
};
var d = $.Deferred();
d.then(options.success);
setTimeout(function () {
d.resolve({
V1: r(),
V2: r(),
V3: r(),
V4: r()
});
}, Math.random() * 10000);
return d.promise();
};
//Highcharts emulator
$.fn.highcharts = function () {
var container = this;
return new (function () {
this.series = [{
setData: function (data) {
container.empty();
$.each(data, function(i, d) {
container.append('<div>X: ' + d.x + ', Y: ' + d.y + '</div>');
});
}
}]
})();
};
var chart = $('#container').highcharts({
series: [{
data: (
function () {
//We'll initialize an array of zeroes to set your series up
var initialData = [];
//This will eventually be populated with our data
var ajaxData = [];
//References to all our requests we'll make
var ajaxRequests = [];
y1 = 5,
y2 = 5,
y3 = 5,
y4 = 5;
function myFunction(x) {
return $.ajax({
type: "GET",
url: "/getTest",
success: function (data) {
console.log("1st 1:", y1, y2, y3, y4);
y1 = data.V1;
y2 = data.V2;
y3 = data.V3;
y4 = data.V4;
console.log("1st 2:", y1, y2, y3, y4);
//Add the returned data to our array in the correct position
ajaxData.push({
x: x,
y: y1
});
}
});
};
...