title: Dynamic Chart in Php Using Chart.js
body: <p>i tried to draw dynamic chart using Chart.js but no output ... 
  i follow this video <a href="https://www.youtube.com/watch?v=mmz79gH0l6c&amp;t=101s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=mmz79gH0l6c&amp;t=101s</a></p>
  
  <p>and do every step in this video but NO OUTPUT So WHERE is The problem</p>
  
  <p>data.php</p>
  
  <pre><code>&lt;?php
  header('Content-Type: application/json');
  define('DB_HOST', '127.0.0.1');
  define('DB_USERNAME', 'root');
  define('DB_PASSWORD', '');
  define('DB_NAME', 'test');
  $mysqli = new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD,DB_NAME);
  if(!$mysqli){
    die("Connection Failed: ".$mysqli-&gt;error);
  }
  $query = sprintf("SELECT playerid, score FROM score ORDER BY playerid");
  $result = $mysqli-&gt;query($query);
  $data = array();
  foreach ($result as $row){
    $data[] = $row;
  }
  $result-&gt;close();
  $mysqli-&gt;close();
  print json_encode($data);
  ?&gt;
  </code></pre>
  
  <p>bargraph.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Bargraph&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #chart-container{
              width: 640px;
              height: auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="chart-container"&gt;
          &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="js/jquery-3.2.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/Chart.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>$(document).ready(function(){
      $.ajax({
          url: "http://localhost/chart/data.php",
          method: "GET",
          success: function(data) {
              console.log(data);
              var player = [];
              var score = [];
  
              for(var i in data){
                  player.push("player " + data[i].playerid);
                  score.push(data[i].score);
              }
  
              var chartdata = {
                  labels: player,
                  dataset : [
                      {
                          label: 'player score',
                          backgroundColor: 'rgba(200, 200, 200, 0.75)',
                          borderColor: 'rgba(200, 200, 200, 0.75)',
                          hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                          hoverBorderColor: 'rgba(200, 200, 200, 1)',
                          data: score
                      }
                  ]
              };
  
              var ctx = $("#mycanvas");
  
              var barGraph = new Chart(ctx, {
                  type: 'bar',
                  data: chartdata
              });
          },
          error: function(data) {
              console.log(data);
          }
      });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/W7D2v.png" rel="nofollow noreferrer">enter image description here</a></p>