2012-11-25 3 views
0

PHP 파일로 만든 json 데이터를 다른 스크립트로 구문 분석하고 그 값을 하이 차트에 표시하려고합니다.성공없이 JSON 데이터를 Highcharts로 전달하려고합니다.

<?php 
header("Content-type: application/json"); 

$dbhost = "localhost"; 
$dbuser = "db"; 
$dbpass = "xxxxx"; 
$dbname = "db"; 
$db = mysql_connect($dbhost, $dbuser, $dbpass); 
mysql_select_db($dbname,$db); 
$query = "SELECT * FROM monitor_total"; 

$result = mysql_query($query,$db); 

while($row = mysql_fetch_array($result)) { 
    $date = $row["date"]; 
    $count = $row["count"]; 
    $array[] = array("date" =>$date,"count"=>$count); 
} 
echo json_encode($array); 
?> 

data.php 출력된다 :

[{"date":"2012-11-23","count":"582311"},{"date":"2012-11-24","count":"582322"},{"date":"2012-11-22","count":"582121"},{"date":"2012-11-21","count":"581321"},{"date":"2012-11-19","count":"572821"},{"date":"2012-11-20","count":"581321"},{"date":"2012-11-18","count":"582421"},{"date":"2012-11-17","count":"579321"},{"date":"2012-11-16","count":"581321"},{"date":"2012-11-25","count":"558178"}] 

<script> 내부 :

var monitor_graph; // globally available 
    monitor_graph = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'graph', 
     type: 'spline', 
     events: { 
      load: requestData 
     } 
    }, 
    title: { 
     text: 'Registered and total players by date' 
    }, 
    xAxis: { 
     categories: [] 
    }, 
    yAxis: { 
     title: { 
      text: 'Players' 
     } 
    }, 
    series: [{ 
     name: 'Total Players', 
     data: [] 
    }] 
    }); 
function requestData() { 
$.ajax({ 
     url: 'data.php', 
    success: function(data) { 
     $.each(data, function(i,item){ 

       monitor_graph.series[0].setData(??????????); 

     }); 
    setTimeout(requestData, 1000); 
    }, 
}); 
} 

제가 생성 방법 JSON 데이터를 생성

내 data.php이있다 세리는 x 축에 'item.date', y 축에 'item.count'를 가진 총 선수로 명명 되니?

도와주세요!

UPDATE :

monitor_graph.xAxis[0].setCategories([item.date]); 
monitor_graph.series[0].setData([parseFloat(item.count)]); 

와 내가하지만, 다음과 같은 오류와 함께 그것을 필요로 난 이제 정확히 1 점을 얻을 : 나는 각각의 내부에이 추가

Unexpected value NaN parsing y attribute. 
+0

관련 @ http://stackoverflow.com/questions/12485560/highcharts-returning-error-14 날짜 요구 될 ** 시대 시간에 간다 'string') 값은 숫자 ('float' 또는'int')가되어야합니다. 모든 것이 문자열 –

+0

입니다. @ 내 업데이트를보세요. – Alexandros

+0

오류 14가 발생하지 않습니다! – Alexandros

답변

2

당신은 Series.setData() 방법은 INT/플로트가 아닌 문자열 배열을 기대하고 전체 데이터 세트가 아닌 각 지점 호출해야이

var categories=[]; 
var seriesData=[]; 
$.each(data,function(){ 
    categories.push(this.date); 
    seriesData.push(parseInt(this.count)); 
}); 
chart.xAxis[0].setCategories(categories); 
chart.series[0].setData(seriesData); 

처럼 뭔가에 성공 콜백을 수정해야합니다. $.each 내부에서이 작업을 수행하는 중에이 루프 외부에서 수행해야합니다. 동일은 int` (안`로 ** 카테고리

Demo @ jsFiddle

+0

고마워요.여기에있는 모든 예제에서 모든 명령을 시도했지만 모든 루프 내부 :/지금은 잘 실행되고 있지만 나는 여전히 이것을 얻습니다. 예기치 않은 값 NaN 구문 분석 y 특성. – Alexandros

+1

@Alex 예 콘솔에서도 그걸 보았습니다.하지만 경고가 아니라 오류가 없으므로 아무 것도 깨지 말아야합니다. –

+0

마지막 질문 : 어떻게 그래프의 점 순서를 바꿀 수 있습니까? 이제는 나에게 가장 최신의 것을 제공한다! – Alexandros

1

당신이받을 데이터가 객체가있는 배열 형태. $ .each 함수에서 이미 수행하고있는 배열을 반복 할 필요가있다. 이렇게하면 i 변수 형식으로 각 오브젝트에 액세스 할 수 있습니다. 이 변수는 점 표기법을 통해 필요한 속성에 액세스 할 수 있습니다. 귀하의 경우 i.date 및 i.count가됩니다.

내가 말할 수있는 것부터 setData 메소드는 사용자가 설정할 수있는 값에 대한 배열을 허용하므로 ???? 다음과 같습니다 :

monitor_graph.series[0].setData([i.date, i.count]); 

희망이 있습니다.

+0

나는 방화 광 에서이 오류가 발생 : TypeError : a highchart.js 라인에 정의되지 않은 183 – Alexandros

관련 문제