2016-08-31 12 views
0

私たちはインターネットからこのファイルを入手しましたが、なんとかJSONという出力をconsoleに得ることができますが、chartdisplay.jsにはJSONというファイルがありません。Json to Chart.js not working

私を助けてくれますか?
ありがとうございます!

HTML

<script type="text/javascript" src="/js/jquery.min.js"></script> 
<script type="text/javascript" src="/chartjs/chart.js"></script> 
<script type="text/javascript" src="chartdisplay.js"></script> 

<div class="chart-container"> <!-- we have defined width and height for this class --> 
    <canvas id="mycanvas"></canvas> 
</div> 

content.php

<?php 
//get connection 
$mysqli = new mysqli('localhost','root','','beehive_exp'); 

if(!$mysqli){ 
    die("Connection failed: " . $mysqli->error); 
    } 

$query = sprintf("SELECT userid, facebook, twitter, googleplus FROM followers"); 

//execute query 
$result = $mysqli->query($query); 

//loop through the returned data 
$data = array(); 
foreach ($result as $row) { 
    $data[] = $row; 
    } 

//free memory associated with result 
$result->close(); 

//close connection 
$mysqli->close(); 

//now print the data 
print json_encode($data); 

chartdisplay.js

$(document).ready(function(){ 
    $.ajax({ 
     url : "http://192.100.1.100/content.php", 
     type : "GET", 
     success : function(data){ 
      console.log(data); 

      var userid = []; 
      var facebook_follower = []; 
      var twitter_follower = []; 
      var googleplus_follower = []; 

      for(var i in data) { 
       userid.push("UserID " + data[i].userid); 
       facebook_follower.push(data[i].facebook); 
       twitter_follower.push(data[i].twitter); 
       googleplus_follower.push(data[i].googleplus); 
      } 

      var chartdata = { 
       labels: userid, 
       datasets: [ 
        { 
         label: "facebook", 
         fill: false, 
         lineTension: 0.1, 
         backgroundColor: "rgba(59, 89, 152, 0.75)", 
         borderColor: "rgba(59, 89, 152, 1)", 
         pointHoverBackgroundColor: "rgba(59, 89, 152, 1)", 
         pointHoverBorderColor: "rgba(59, 89, 152, 1)", 
         data: facebook_follower 
        }, 
        { 
         label: "twitter", 
         fill: false, 
         lineTension: 0.1, 
         backgroundColor: "rgba(29, 202, 255, 0.75)", 
         borderColor: "rgba(29, 202, 255, 1)", 
         pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", 
         pointHoverBorderColor: "rgba(29, 202, 255, 1)", 
         data: twitter_follower 
        }, 
        { 
         label: "googleplus", 
         fill: false, 
         lineTension: 0.1, 
         backgroundColor: "rgba(211, 72, 54, 0.75)", 
         borderColor: "rgba(211, 72, 54, 1)", 
         pointHoverBackgroundColor: "rgba(211, 72, 54, 1)", 
         pointHoverBorderColor: "rgba(211, 72, 54, 1)", 
         data: googleplus_follower 
        } 
       ] 
      }; 

      var ctx = $("#mycanvas"); 

      var LineGraph = new Chart(ctx, { 
       type: 'line', 
       data: chartdata 
       }); 
      }, 
     error : function(data) { 
      } 
     }); 
    }); 

これは、我々が得るものです私たちは、チャットや問題に引き続き

enter image description here

JSON出力

enter image description here

PHP出力

enter image description here

+0

あなたはあなたが得ているエラーを投稿できますか? –

+0

@UmairFarooq私はこの問題の投稿を更新しました。それを見てください。画像は下部に追加されます。 – Beekeeper

+0

'console.log(data)'は何を出力しますか?ブラウザの「インスペクタ」、「コンソールとネットワーク」タブを確認してください。 – skobaljic

答えて

1

私は彼がPHPファイルから得ていたデータがJSON文字列であることを発見しました。

だから、成功関数の最初の行で、私は

data = JSON.parse(data); 

を書いて、同じコードが後に働いたと予想されるようなグラフを示しました。

+0

また、ループは 'for(var i = 0; i Beekeeper

+0

古いループを使用してください。私はそれが問題ではなかったと確信しています。 –

+0

オハイオ州はそれを得ました.. – Beekeeper