Загрузка и обновление динамических диаграмм с динамическими данными (chart.js)

Так недавно я начал эту страницу, где куча динамических вещей собрались вместе, так что вот оно …

1) Пользователь выбирает (в форме), какие столбцы из таблицы базы данных HYDRO он хочет видеть (скажем, для примера здесь он выбирает PM1, PM2, PM3)

2) Затем пользователь выбирает живые или статические графики, т.е. живое обновление графиков или обзор последних 24 часов или что-то (для примера здесь в прямом эфире)

3)

• Графики загружаются, PHP получает массив со всеми столбцами и именем таблицы, из которой они загружаются.

• Затем для каждого столбца PHP выводит метку времени строк в качестве метки, а значение строки выбранного столбца в качестве значения для сценария из Chart.js.

• Код php повторяет это для каждого столбца, запрошенного в цикле foreach (также вычисляется число для деления / умножения значения на и т. Д., Не важно)
• Когда страница закончила загружать все исходные графики, маленький div получает все последние данные (каждый столбец из последней строки дБ, загруженный в себя), затем скрипт chart.js загружает значения, которые ему нужны, из этого скрытого div.

Раньше это работало раньше, но, к сожалению, с тех пор как я вошел в цикл foreach php, чтобы просмотреть различные графики, они больше не отображаются …
Я пытался с помощью $(document).ready(function(){}); но это не сработало, к сожалению.

<?php$mysqli = new mysqli("db4free.net", "rafaello104", "06071994", "morreels");

// GET COMPANY NAME THAT WE ARE FEEDING
// ====================================
if (!isset($full["company_identifier"])) {
$company_identifier = 1;
} else { $company_identifier = $full["company_identifier"];}
//die(print_r($full));
$bedrijf = $full['MYSQL_TABLE'];

$result = $mysqli->query("SELECT * FROM $bedrijf WHERE entry_ID ORDER BY updated DESC LIMIT 20");
$row = $result->fetch_assoc();
$current_feed = array();
while ($row = $result->fetch_assoc()) {
$current_feed[] = $row;

}

?><div id="cmd" style=""> Entry Counter:
<div class="flip-wrapper">
<div id="data_load">
</div>
</div>
</div>

<?php foreach ($full["columns"] as $column_key => $column_values): ?>
<?php

if ($column_key == "load_live") {
continue;
}
$column_operator = $column_values["operator"];
$column_numerator = $column_values["numerator"];
$column_numer_orig = $column_values["numerator"];

if ($column_operator == "x") {
$column_numerator = 1 / $column_numerator;
}

$SQL_name = $column_key;
$display_name = $column_values["value"];

?><!--
=======================================================================
=======================================================================
***********************   START <?php echo $display_name ?>   *************************
=======================================================================
=======================================================================
-->

<script>
$(document).ready(function(){var ctx = $('#<?php echo $column_key; ?>').get(0).getContext("2d");

var data = {
labels: [
"<?php echo $display_name . " @: " . substr($current_feed[10]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[8]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[6]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[4]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[2]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[0]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($most_recent['updated'], 11); ?>"],
datasets: [
{
label: "Today:",
fillColor: "rgba(59, 89, 152, 0.4)",
strokeColor: "rgba(59, 89, 152, 0.6)",
pointColor: "#fff",
pointStrokeColor: "rgba(59,89,152,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [
<?php echo round($current_feed[10][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[8][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[6][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[4][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[2][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($current_feed[0][$SQL_name] / $column_numerator, 2); ?>,
<?php echo round($most_recent[$SQL_name] / $column_numerator, 2); ?>]
}
]
};
var <?php echo $column_key; ?>_chart = new Chart(ctx).Line(data, {
bezierCurves: false,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
responsive: true,
animation: false
});setInterval(function update() {// Update one of the points in the second dataset<?php echo $column_key; ?>_chart.datasets[0].points[0].value = <?php echo $column_key; ?>_chart.datasets[0].points[1].value;
<?php echo $column_key; ?>_chart.datasets[0].points[1].value = <?php echo $column_key; ?>_chart.datasets[0].points[2].value;
<?php echo $column_key; ?>_chart.datasets[0].points[2].value = <?php echo $column_key; ?>_chart.datasets[0].points[3].value;
<?php echo $column_key; ?>_chart.datasets[0].points[3].value = <?php echo $column_key; ?>_chart.datasets[0].points[4].value;
<?php echo $column_key; ?>_chart.datasets[0].points[4].value = <?php echo $column_key; ?>_chart.datasets[0].points[5].value;
<?php echo $column_key; ?>_chart.datasets[0].points[5].value = <?php echo $column_key; ?>_chart.datasets[0].points[6].value;
<?php echo $column_key; ?>_chart.scale.xLabels[0] = <?php echo $column_key; ?>_chart.scale.xLabels[1];
<?php echo $column_key; ?>_chart.scale.xLabels[1] = <?php echo $column_key; ?>_chart.scale.xLabels[2];
<?php echo $column_key; ?>_chart.scale.xLabels[2] = <?php echo $column_key; ?>_chart.scale.xLabels[3];
<?php echo $column_key; ?>_chart.scale.xLabels[3] = <?php echo $column_key; ?>_chart.scale.xLabels[4];
<?php echo $column_key; ?>_chart.scale.xLabels[4] = <?php echo $column_key; ?>_chart.scale.xLabels[5];
<?php echo $column_key; ?>_chart.scale.xLabels[5] = <?php echo $column_key; ?>_chart.scale.xLabels[6];

$live_<?php echo $column_key; ?> = $('#live_<?php echo $column_key; ?>').html();

$live_<?php echo $column_key; ?> = parseInt($live_<?php echo $column_key; ?>);
$live_<?php echo $column_key; ?> = $live_<?php echo $column_key; ?> / <?php echo $column_numerator; ?>;
$live_updated = $('#live_updated').html().substr(20);
<?php echo $column_key; ?>_chart.scale.xLabels[6] = $live_updated;
<?php echo $column_key; ?>_chart.datasets[0].points[6].value = $live_<?php echo $column_key; ?>;
console.log('Latest <?php echo $column_key; ?> value = ' + $live_<?php echo $column_key; ?> + ' this has been updated @: ' + $live_updated);

<?php echo $column_key; ?>_chart.update();
}, 10000);});
</script>
<div class="col colspan-1-of-2" id="pm_charts">
<h3><?php echo $display_name; ?> chart</h3>
<p>This value is calculated by <?php if($column_operator == "/") {echo "dividing";} else { echo "multiplying";}?> the received value by <?php echo $column_numer_orig ?> and then <br/> rounding it up / down to 2 numbers behind the comma.</p>
<canvas id="<?php echo $column_key; ?>" width="650px" height="300px"></canvas>
</div><!--
=======================================================================
=======================================================================
***********************   END <?php echo $display_name ?>   *************************
=======================================================================
=======================================================================
--><?php endforeach; ?><script>

$ii = 0;
setInterval(
function update() {
$ii++;
console.log("Checked dB " + $ii + " times.");
$('#data_load').load('/Morreels_App/public/scripts/js/connection_loop.php');
},
2000);</script>

Я знаю, что это должно выглядеть грязно, но простая вещь — это загрузка динамических скриптов jQuery в соответствии с вводом php, который вставляется до загрузки страницы, часто останавливает работу jQuery, вот ссылка на страницу сайта
http://hmorreels.hol.es/Morreels_App/index.php/charts

Я надеюсь, что кто-то тратит время, чтобы разобраться в этом, я пытался и пытался, и он не будет загружаться: / Независимо от того, что я пытаюсь ….

PS: я не пытаюсь быть ленивым и прошу вас, ребята, решить эту проблему для меня просто так, я просто не могу разобраться в динамически загружаемых скриптах jQuery и почему они иногда не работают, а иногда они делают …

Некоторая дополнительная информация:
$full Массив, используемый в PHP, содержит несколько выбранных столбцов следующим образом:

А вот изображение используемой структуры таблицы Атабазы, содержащей все значения