在javascript循环中增加php变量

Question

Im trying to create a display of charts using chartJS that are dynamic in both the number of charts displayed and its contents. I am stuck as to how to iterate through the result set in php while looping through the creation of charts in javascript. I know that Javascript is processed client side and php is processed server side. I wrote this code to give you guys a general idea of what i am trying to do. Right now the counter does not increase and i end up with the same graphs, whatever data that comes first in the array. In a sense, i need some way of tracking the var i in javascript within php to access the contents in my result set.

var charts = [];
    <?php $counter = 0; ?>

    for (var i = 0; i < <?php echo sizeOf($readingArray); ?>; i++) {
        var ctx = document.getElementById(i);
        charts[i] = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
            label: 'Actual Readings',
            data: <?php echo json_encode($readingArray[$counter][4], JSON_NUMERIC_CHECK); ?>,
        }, {
            label: 'Threshold',
            data: <?php echo json_encode($readingArray[$counter][5], JSON_NUMERIC_CHECK); ?>,
        }],
        labels: <?php echo json_encode($readingArray[$counter][3]);?>,

        },
        options: {
                zoom: {
                        enabled: true,
                        mode: 'x',
                },
                pan: {
                       enabled: true,
                       mode: 'x',
                },

        },
    });
    <?php $counter++; ?>
  }

Answer 1

You shout assign php variables to js variables and work with them. Something like this

var data = '<?php echo json_encode($readingArray); ?>';

Then convert json string to object

arrayOfObjects = JSON.parse(data)

After that iterate your data and print chart

for (var key in arrayOfObjects) {
console.log(arrayOfObjects[key])
}