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

Question

So recently I started this page where a bunch of dynamic stuff comes together so here it is...

1) A user chooses (in a form) which columns from Database table HYDRO he wants to see (lets say for the example here he chooses PM1, PM2, PM3)

2) Then the user selects live or static charts I.e. live updating charts or an overview of the last 24hrs or something (for the example here live)

3)

• Charts get loaded, PHP gets the array with all the columns and the name of the table to load them from.

• Then for each column, PHP outputs the rows timestamp as label and the chosen column row value as value to the script from Chart.js

• The php code repeats this for every column requested in a foreach loop (also calculating the number to divide / multiply the value by etc , not important)
• When the page finished to load all the initial graphs, a small div gets all the latest data (every column from last row of dB loaded into itself), the chart.js script then loads the values that it needs from this hidden div.

This used to work before but sadly since I entered the foreach php loop to loop through the different graphs, they do not show up anymore... I tried using $(document).ready(function(){}); but that did not work sadly.

<?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>

I know this must look messy, but the simple thing is loading dynamic jQuery scripts according to php input thats put in before the page is loaded often stops jQuery from working, here is the link for the site's page http://hmorreels.hol.es/Morreels_App/index.php/charts

I hope someone takes the time to look into this, i've been trying and trying and it will not load :/ No matter what i try ....

PS: I am not trying to be lazy and ask you guys to solv emy problem for me just like that, I just can't seem to get my head around the whole dynamically loading jQuery scripts and why they sometimes don't work and sometimes they do ...

Some extra info: the $full array used in PHP contains multiple selected columns in this way:

And here is a picture of the used atabase table structure containing all the values

Answer 1

Sorry for wasting (perhaps) some of your time guys / girls,

I apparently shouldnt have named my canvases the way I did, this was in conflict with some other jQuery variables and apparently messed the whole thing up, this has been fixed

(some ore minor bug in the updating system but it's majorly problem is fixed !! :) )