PHP Google Charts causes for loop to loop weirdly - php

Question

I am facing an issue where the for loop loops properly to display a table in php when Google Charts is not used and when Google Charts is implemented on the page, the table only loops twice. I know this because I've echoed the count($arr) and echo the word LOOPED. My count shows 9 but it will only loop twice.
The google chart I am using is the pie chart and when this pie chart becomes really huge, where there are many slices, this would occur. What's weird is the Google Chart isn't inside this for loop.
for ($i = 1; $i < count($arr); $i++){
print_r(count($arr));
echo "LOOPED";
$splitwords = explode("ON", ($arr[$i]));
<td>$splitwords[0]</td>
<td>$splitwords[1]</td>"; }
This is the function being called.
function retrievepieCharts(minnumber,hournumber,daynumber){
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawminuteChart);
google.charts.setOnLoadCallback(drawhourChart);
google.charts.setOnLoadCallback(drawdayChart);
function drawminuteChart() {
var data = google.visualization.arrayToDataTable([
['Timing', 'Times'],
<?php
for ($i = 0; $i < count($minuteArray); $i++) {
$firstArraywithin10mins = $minuteArray[$i];
$firstDATEtoRetrieve = $firstArraywithin10mins[0];
$firstTimingtoRetrieve1 = $firstArraywithin10mins[1];
$firstTimingtoRetrieve = $firstDATEtoRetrieve . " ". $firstTimingtoRetrieve1;
$totalCountwithin10mins = count($firstArraywithin10mins)-1;
echo "['$firstTimingtoRetrieve', $totalCountwithin10mins],";
}
echo" ]);";
?>
var mintitle = "Logon Fails > 5 within " + minnumber + " minute(s)";
var hourtitle = "Logon Fails > 5 within " + hournumber + " hour(s)";
var daytitle = "Logon Fails > 5 within " + daynumber + " day(s)";
var options = {backgroundColor: 'transparent',chartArea:
{left:0,top:90,width:"90%",height:"90%"}
,height: 450
,width: 450,
title: 'Logon Fails > 5 within '+ minnumber +' minutes (Likely to be automated brute force)'
};
var minutechart = new google.visualization.PieChart(document.getElementById('piechart'));
minutechart.draw(data, options);
function selectminuteHandler() {
var selectedItem = minutechart.getSelection()[0];
if (selectedItem) {
var topping = data.getValue(selectedItem.row, 0);
var date = new Date(topping).toLocaleDateString("en-US");
var options = { hour12: false };
var time = new Date(topping).toLocaleTimeString('en-US', options);
var rows = document.querySelectorAll('#csv_table tr');
$allRows = $('#csv_table tr');
$allData = $('#csv_table td');
row1 = $allRows.filter(function(){
return $.trim($(this).find('td').eq(1).text()) == date;
});
row2 = $allData.filter(function(){
return $.trim($(this).find('td').eq(1).text()) == time;
});
index = $allRows.index(row1);
var table = document.getElementById("csv_table");
row = table.rows[index];
for (var i = 0, row11; row11 = table.rows[i]; i++) {
for (var j = 0, col; col = row11.cells[j]; j++) {
row11.cells[j].style.backgroundColor = "";
}}
rows.forEach(row => row.classList.remove('active'))
for (var j = 0, col; col = row.cells[j]; j++) {
var timeintable = row.cells[j].innerHTML.slice(12,20);
var target = new Date("1970-01-01 " + time);
var target2 = new Date("1970-01-01 " + timeintable);
timedifferences = target - target2;
var minuteVal = timedifferences / 60000;
if (minuteVal< 0){
minuteVal = minuteVal * -1;
}
if (minuteVal < minnumber){
row.cells[j].style.backgroundColor = "yellow";
document.getElementById('msg_div').innerHTML = hourtitle;
rows[index].scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
else{
row.cells[j].style.backgroundColor = "";
}
}
}
}
google.visualization.events.addListener(minutechart, 'select', selectminuteHandler);
}
This is the part where the function is being called. The $minData and $hourData is retrieved when the user clicks on the submit button through a form.
if (isset($minData) and isset($hourData)){
echo "<script type='text/javascript'>retrievepieCharts('$minData', '$hourData', '$dayData');
</script>"
;
}
This is the form which takes in the $minData and $hourData. I've tried changing the $minData and $hourData values and every time I changed it, the table loops differently. I've also tried to remove the submit button to see if that was causing the issue but the result is the same without the submit.
<form id="differencesnumber" method="POST">
<label for="mindiff">Minutes Differences</label>&nbsp&nbsp
<input type="number" id="mindiff" name="mindiff" style="width:50px;" min="0"
oninput="validity.valid||(value='');"required>
<br>
<label for="hourdiff">Hours Differences</label>&nbsp&nbsp
<input type="number" id="hourdiff" name="hourdiff" style="width:50px;" min="0" oninput="validity.valid||(value='');"required>
<br>
<input type="submit" value="Get PieCharts">
</form>
The codes are over 1000 lines and if anyone needs the entire code, do inform me.
Anyone knows what is the bug? I've been trying to debug this for days but to no avail.