Script is not running at the same time as the loop - php

Question

I currently have a for loop and I am running a script inside it.
I logged whenever the loop ran and whenever the function was executed.
This is a sample of my code:
This script is in a loop that runs 3 times
<script>
console.log ("LOOP");
var impressions = [<?= implode(",", $prod_impression_dots) ?>];
var testdata = [
{
"key" : "Impressions" ,
"type": "line",
"values" : impressions,
"yAxis": 1
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
nv.addGraph(function() {
console.log ("Add graph is called here");
console.log (testdata);
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());
chart.xAxis
.tickFormat(function(d) {
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
if (typeof (dx) == undefined || d > 1000) {
dx = new Date (d);
}
else {
dx = new Date (dx);
}
return dx ? d3.time.format('%x')(dx) : '';
});
chart.yAxis1
.tickFormat(d3.format(',.1f'));
chart.yAxis2
.tickFormat(d3.format(',.4f'));
d3.select('#chart<?= $counter ?> svg')
.datum(testdata)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>
Below the script is the div tag
<div id='chart<?= $counter ?>' style="width:1150px;height:300px;font-size:11px;margin-top:5px">
<svg> </svg>
</div>
After running this. The output in the console log is as follows;
LOOP
LOOP
LOOP
Add graph is called here
[Object, Object, Object, Object]
Add graph is called here
[Object, Object, Object, Object]
Add graph is called here
[Object, Object, Object, Object]
total 199 nv.d3.js:40
I am just wondering why the function isn't executed right after one iteration of the loop. This causes all the graphs to have the same data.
Thanks.

Answer 1

Definitely your addGraph complete function gets called asynchronously. You can work around this like this.
<script>
console.log ("LOOP");
var impressions = [<?= implode(",", $prod_impression_dots) ?>];
var testdata = [
{
"key" : "Impressions" ,
"type": "line",
"values" : impressions,
"yAxis": 1
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
nv.addGraph((function (testdata) {
return function() {
console.log ("Add graph is called here");
console.log (testdata);
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());
chart.xAxis
.tickFormat(function(d) {
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
if (typeof (dx) == undefined || d > 1000) {
dx = new Date (d);
}
else {
dx = new Date (dx);
}
return dx ? d3.time.format('%x')(dx) : '';
});
chart.yAxis1
.tickFormat(d3.format(',.1f'));
chart.yAxis2
.tickFormat(d3.format(',.4f'));
d3.select('#chart<?= $counter ?> svg')
.datum(testdata)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
}
})(testdata));
</script>