Morris.js没有显示任何图表

Question

i'm trying to make a morris.js line chart which displays the total amount of registered users.

The thing is that it won't show on my index.php. I have all the javascript and css files imported. Is there anyone that could give me a hand?

I'm very new to the javascript scene. So simple answers are welcome haha.

Here is my code:

      <?php

                $connection = $stmt -> prepare("SELECT * FROM `user`");
                $connection -> execute();

                $chart_data = '';

                while($row = $connection -> fetch(PDO::FETCH_ASSOC)){
                  $chart_data .= "{ year:'".$row['ID']."'
                  }";
                }
                $chart_data = substr($chart_data, 0, -2);



                 ?>

                 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
                 <script stc="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
                 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
                 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

                 <script>
                 Morris.Bar({
                   element : 'chart',
                   data:[<?php echo $chart_data; ?>],
                   xkeys:'year',
                   ykeys:['users'],
                 });
                 </script>


                <div class="container" style="width:900px;">
                    <h2 allign="center">Data grafiek</h2>
                    <br><br>
                    <div id="chart"></div>
                </div>

Answer 1

Your Data should be in this format:

 data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],

I have change the library of jQuery. Putting the JS at the end of HTML code

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"
              integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
              crossorigin="anonymous"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

                 <script>
        $(document).ready(function(){
                 Morris.Bar({
                   element : 'chart',
                   data:[<?php echo $chart_data; ?>],
                   xkeys:'value',
                   ykeys:['year'],
                  labels: ['year']
                 });
               });
</script>

And PHP code Should be not -2 it will be -1

  while($row = mysqli_fetch_assoc($result)){
                     $id=$row['id'];  
             $val=$row['fname'];
             $chart_data .= "{ year:'$id',value:'$val'},";
                }
                $chart_data = substr($chart_data, 0, -1);

Try this and share your console if you can