PHP not showing within the data part of a chart.js

Question

I have managed to get both PHP and JavaScript code working on the same page. In the top of the page on the left you can see that my figures from my php tables are being pulled out correctly however, the moment I go to paste the php code inside of where the table 'data' needs to be kept it doesn't work even though surrounded in php tags.

        <?php
    $conn = mysqli_connect("localhost", "x", "y", "z");

    $query = "SELECT * FROM `checkPointMod`";


    $result = $conn -> query($query);


    while($row = $result -> fetch_assoc()) 
      {
        echo $row['mod1']."<br>";
        echo $row['mod2']."<br>";
        echo $row['mod3']."<br>";
        echo $row['mod4']."<br>";
        echo $row['mod5']."<br>";
        echo $row['mod6']."<br>";
      }



    $conn -> close();
    ?>


    <!DOCTYPE html>
        <html lang="en-GB">
        <head>
            <meta charset="UTF-8">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

        </head>

        <body style="background-color: lightgrey;">


    <div class="col-md-4 text-center">Third of Page - Middle section with progress bar
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>

    <script type="text/javascript">
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [<?php echo $row['mod1']?>, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    </script>

    </html>

Update: - I've gone to inspect element to see what the output is and it's seen here, I also placed mod2 in to see if 6 would appear...

save your results to a new variable since you want to use them outside the while loop. Like $mod1=$row['mod1']; and echo that in your javascript. — Dimitris Filippou
– Dimitris Filippou, Commented Mar 1, 2019 at 15:00
You must place $mod1=$row['mod1']; inside your while loop or try the answer posted by Chris G — Dimitris Filippou
– Dimitris Filippou, Commented Mar 1, 2019 at 15:11
Dimitris and Chris BOTH of these worked so thank you both so much, I mean I don't know enough about JavaScript to know which one is best to use but thank you both!!!! :) one happy girl right here! — Sunny0101
– Sunny0101, Commented Mar 1, 2019 at 15:20
Glad it's working :) Mine might be a bit more future-proof, in case the db table gains some more rows. — user5734311
– user5734311, Commented Mar 1, 2019 at 15:30
Yeah Chris' answer is definately more future proof i just wanted to point out to you that the variable $row exists only inside the while loop — Dimitris Filippou
– Dimitris Filippou, Commented Mar 1, 2019 at 15:35

user5734311 · Accepted Answer · 2019-03-01 15:07:38Z

2

I missed that $row only exists inside that while loop.

Replace your while loop with this:

$rows = [];
while ($row = $result -> fetch_assoc()) $rows[] = $row;

Down in your Javascript code, add this at the top:

const data = <?= json_encode($rows, JSON_NUMERIC_CHECK) ?>;

You should end up with this in your page source:

const data = [{ "checkPID": 6, "mod1": 0, "mod2": 6, "mod3": 0, "mod4": 3, "mod5": 2, "mod6": 1, "idUsers": 1 }];

Now you can do this in your Chart setup:

data: Object.keys(data[0]).filter(key => key.startsWith("mod")).map(key => data[0][key]),

answered Mar 1, 2019 at 15:07

user5734311

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP not showing within the data part of a chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related