使用动态数据加载和更新动态图表 (chart.js)

Question

最近我打开了这个页面，其中汇集了一堆动态的东西，所以这里是...

1) 用户选择（在表格中）他想查看数据库 table HYDRO 中的哪些列（假设这里的示例他选择 PM1、PM2、PM3）

2) 然后用户选择实时或静态图表，即实时更新图表或过去 24 小时的概览或其他内容（例如此处实时）

3)

加载图表，PHP 获取包含所有列的数组和要从中加载它们的 table 的名称。
然后对于每一列，PHP 将行时间戳作为标签输出，并将所选列的行值作为值输出到脚本 Chart.js
php 代码对 foreach 循环中请求的每一列重复此操作（还计算 divide 的数字/将值乘以 etc ，不重要）
当页面完成加载所有初始图表时，一个小的 div 获取所有最新数据（加载到自身的最后一行 dB 的每一列），然后加载 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>

我知道这看起来一定很乱，但简单的事情是根据 php 输入加载动态 jQuery 脚本，在页面加载之前输入通常会停止 jQuery 工作, 这是站点页面的 link http://hmorreels.hol.es/Morreels_App/index.php/charts

我希望有人花时间研究这个，我一直在尝试，但它不会加载：/无论我尝试什么....

PS: 我不是想偷懒，就这样请你们帮我解决我的问题，我只是似乎无法理解整个动态加载 jQuery 脚本以及为什么它们有时不起作用，有时却起作用......

一些额外信息： PHP 中使用的 $full 数组以这种方式包含多个选定的列：

这里是使用的数据库 table 结构的图片，其中包含所有值

Answer 1

抱歉浪费了（也许）你们的一些时间，伙计们/姑娘们，

我显然不应该像我那样命名我的画布，这与其他一些 jQuery 变量发生冲突，显然把整个事情搞砸了，这已得到修复

（更新系统中的一些小错误，但主要问题已修复！！:)）

使用动态数据加载和更新动态图表 (chart.js)

Loading and updating dynamic charts with dynamic data (chart.js)

php

mysql

jquery

loading

chart.js