2016-08-31 3 views
0

우리는 인터넷에서이 파일을 얻었고 어떤 식 으로든 JSONconsole에 넣을 수는 있지만 chartdisplay.jsJSON 파일을 가져 오지 않습니다.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