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++; ?>
}