javascript - JS Chart is displayed only once in php loop

I have a script where many database entries should be displayed one below the other in a box. All PHP variables work perfectly in the PHP loop except the JavaScript code is only displayed once in the first box. In the other boxes I see only the empty div class.

How can I make each box show a different chart with its value, not only one? Here is the rough code:

index.php:

<!--Other code-->


<?php
        
$query = "SELECT * FROM accounts WHERE user ='$user' ORDER BY date DESC";    
$results = $db->query($query);
    
while($row = mysqli_fetch_array($results)){ 
    
?> 


<div class="accounts">  
<p>Name: <?php echo $row['name']; ?></p>
<img class="icon" src="/icons/profile.png"> 

<div class="chart-box">

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> 

<div id="my-chart" class="ct-chart ct-perfect-fourth"></div>

</div>
</div>

<script> 

var data = {
  series: [
    {
      data: [<?=$row['value1']?>, <?=$row['value2']?>, <?=$row['value3']?>, <?=$row['value4']?>] 
    }
  ]
};


var options = {
  axisX: {
  }
};


var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Week ' + value;
      }
    }
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

new Chartist.Line('#my-chart', data, options, responsiveOptions);
   
</script> 



<?php    
}
?> 


<!--Other code-->
Copy code

I have 4 users in the database, but the chart is only displayed for the first user in the first box.

Thanks for help!

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.