title: How to draw Line graph using data from MySQL table and PHP
body: <p>I want to draw line graph using data from database.</p>
  <p><a href="http://futurk.com/futurk.com/etkin/pages/veri.php" rel="nofollow noreferrer">http://futurk.com/futurk.com/etkin/pages/veri.php</a>
  This link is show me what i have in my database.
  Here is veri.php code:</p>
  <pre><code>&lt;?php
  
  header('Content-Type: application/json');
  
  //database
  define('DB_HOST', 'localhost');
  define('DB_USERNAME', 'futurk_etkin');
  define('DB_PASSWORD', 'etkin');
  define('DB_NAME', 'futurk_etkin');
  
  //get connection
  $mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
  
  if(!$mysqli){
      die(&quot;Connection failed: &quot; . $mysqli-&gt;error);
  }
  
  //query to get data from the table
  $query = sprintf(&quot;SELECT id,gerilim,akim,guc FROM etkin&quot;);
  
  //execute query
  $result = $mysqli-&gt;query($query);
  
  //loop through the returned data
  $data = array();
  foreach ($result as $row) {
      $data[] = $row;
  }
  
  //free memory associated with result
  $result-&gt;close();
  
  //close connection
  $mysqli-&gt;close();
  
  //now print the data
  print json_encode($data);
  
  
  ?&gt;
  </code></pre>
  <p>I also made linegraph.html file that i can see my graph. Here is linegraph.html code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;ChartJS - LineGraph&lt;/title&gt;
          &lt;style&gt;
              .chart-container {
                  width: 640px;
                  height: auto;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;chart-container&quot;&gt;
              &lt;canvas id=&quot;mycanvas&quot;&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          
          &lt;!-- javascript --&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;../../dist/js/jquery.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;../../dist/js/Chart.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;../../dist/js/linegraph.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And I added a linegraph.js. Here is my linegraph.js code:</p>
  <pre><code>$(document).ready(function(){
      $.ajax({
          url : &quot;http://futurk.com/futurk.com/etkin/pages/veri.php&quot;,
          type : &quot;GET&quot;,
          success : function(data){
              console.log(data);
  
              var id = [];
              var gerilim = [];
              var akim = [];
              var guc = [];
  
              for(var i in data) {
                  id.push(&quot;ID &quot; + data[i].id);
                  gerilim.push(data[i].gerilim);
                  akim.push(data[i].akim);
                  guc.push(data[i].guc);
              }
  
              var chartdata = {
                  labels: userid,
                  datasets: [
                      {
                          label: &quot;gerilim&quot;,
                          fill: false,
                          lineTension: 0.1,
                          backgroundColor: &quot;rgba(59, 89, 152, 0.75)&quot;,
                          borderColor: &quot;rgba(59, 89, 152, 1)&quot;,
                          pointHoverBackgroundColor: &quot;rgba(59, 89, 152, 1)&quot;,
                          pointHoverBorderColor: &quot;rgba(59, 89, 152, 1)&quot;,
                          data: facebook_follower
                      },
                      {
                          label: &quot;akim&quot;,
                          fill: false,
                          lineTension: 0.1,
                          backgroundColor: &quot;rgba(29, 202, 255, 0.75)&quot;,
                          borderColor: &quot;rgba(29, 202, 255, 1)&quot;,
                          pointHoverBackgroundColor: &quot;rgba(29, 202, 255, 1)&quot;,
                          pointHoverBorderColor: &quot;rgba(29, 202, 255, 1)&quot;,
                          data: twitter_follower
                      },
                      {
                          label: &quot;guc&quot;,
                          fill: false,
                          lineTension: 0.1,
                          backgroundColor: &quot;rgba(211, 72, 54, 0.75)&quot;,
                          borderColor: &quot;rgba(211, 72, 54, 1)&quot;,
                          pointHoverBackgroundColor: &quot;rgba(211, 72, 54, 1)&quot;,
                          pointHoverBorderColor: &quot;rgba(211, 72, 54, 1)&quot;,
                          data: googleplus_follower
                      }
                  ]
              };
  
              var ctx = $(&quot;#mycanvas&quot;);
  
              var LineGraph = new Chart(ctx, {
                  type: 'line',
                  data: chartdata
              });
          },
          error : function(data) {
  
          }
      });
  });
  </code></pre>
  <p>but when i click this link, I see nothing.Am I wrong?</p>
  <p><a href="http://futurk.com/futurk.com/etkin/pages/charts/linegraph.html" rel="nofollow noreferrer">http://futurk.com/futurk.com/etkin/pages/charts/linegraph.html</a></p>