Sự cố loạt dữ liệu Highcharts với ajax/json và PHP

Question

Đây là yêu cầu đầu tiên của tôi ở đây và tôi đã đọc nhiều bài đăng có liên quan khác về vấn đề tương tự này, nhưng tôi vẫn gặp khó khăn và khá nhiều vào trí thông minh của mình về điều này ... Vì vậy, bất kỳ trợ giúp được nhiều đánh giá cao!

Tôi có đối tượng Highcharts sau trên Page1.php và tôi đang sử dụng AJAX để lấy dữ liệu từ Page2.php khi tải trang cũng như khi tùy chọn thả xuống được thay đổi.

(cắt ngắn cho dễ đọc):

$(document).ready(function() { 

    var e = document.getElementById("selOption"); //<--- This is the dropdown 
    var domText = e.options[0].text; 
    var domID = e.options[e.selectedIndex].value; 

    var options = { 
     chart: { 
     renderTo: 'linechart', 
     type: 'line' 
     }, 
     title: { 
     text: 'Title for ' + domText 
     }, 
     subtitle: { 
     text: '' 
     }, 
     xAxis: { 
     type: 'datetime', 
     dateTimeLabelFormats: { 
      month: '%b %e, %Y', 
      year: '%Y' 
     } 
     }, 
     yAxis: { 
     title: { 
      text: 'Important Values' 
     }, 
     reversed: true, 
     min: 0, 
     max: 100 
     }, 
     tooltip: { 
     formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
       Highcharts.dateFormat('%b %e', this.x) +': '+ this.y; 
     } 
     }, 
     series: [] 

}; 

$.get('Page2.php?domID=' + domID,function(data) { 
    $.each(data, function(key,value) { 
     //var series = {}; 
     //series.name.push(value); 
     //series.data.push([value]); 
     options.series.push(data); 
     //alert(data); 
    }); 

    var linechart = new Highcharts.Chart(options); 
}); 

}); 

Page2.php có sau gửi lại json:

$sqlSelect = "SELECT Item1,Item2,Item3 FROM... "; 
$result = mysql_query($sqlSelect); 

while ($item = mysql_fetch_assoc($result)) {    
    $name = $item['Item1']; 
    $date = str_replace("-",",",$item['Item2']); 
    $pos = $item['Item3']; 

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],"); 
    echo json_encode($arr);   
} 

trở json của tôi trông như thế này:

{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} 
{"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"} 

Khi biểu đồ của tôi tải, nó sẽ điền vào tên 135 Series (?!?!?!) Ở phía dưới và không xuất hiện để hiển thị các điểm trên biểu đồ đường kẻ.

Nếu tôi loại bỏ các dấu ngoặc kép và mã cứng kết quả vào mảng series, nó hoạt động tốt (mặc dù tôi nhận thấy ví dụ không xuất hiện để có một dấu phẩy giữa các đối tượng.

THANK YOU cho tất cả sự giúp đỡ ... đặc biệt là nhanh chóng trả lời! ;-)

Answer 1

SOLVED:

Tôi tìm thấy một câu trả lời mà cuối cùng làm việc! Bực bội vì tôi mất nhiều ngày vì nó không được Highcharts ghi nhận (và/hoặc có lẽ sự hiểu biết của tôi về jQuert và JavaScript vẫn ở cấp độ mới).

Câu trả lời là không gửi X/dữ liệu Y như một mảng PREFORMED trong đối tượng json của bạn, mà thay vào đó chỉ cần gửi những con số mà tạo nên ngày (x giá trị) và giá trị (giá trị y) dưới dạng danh sách các giá trị được phân tách bằng dấu phẩy trong đối tượng json, sau đó thực hiện phân tích cú pháp và đẩy vào cuối ứng dụng khách.

Ví dụ: tôi ban đầu đã cố gắng để có được PHP của tôi để gửi một cái gì đó giống như

[{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]} 

nhưng những gì tôi thực sự cần phải làm là gửi một cái gì đó giống như

[{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....` 

Bước đầu tiên là để đảm bảo bạn có tùy chọn "chuỗi" được đặt thành một mảng trống series: []

(Tôi đề cập đến điều này vì tôi đã thấy o có câu trả lời, nơi điều này đã được thực hiện khác nhau).

Sau đó, trong hàm getJSON, bạn cần phải tạo một đối tượng mới cho từng đối tượng bạn đang kéo vào, cũng bao gồm mảng "dữ liệu" trống (xem "chuỗi var" bên dưới).

Sau đó tổ một vài $.each vòng để phân tích và đẩy dữ liệu vào mảng cần thiết của họ, và cư "name" của từng đối tượng:

$.getJSON('http://exmaple.com/getdata.php?ID=' + id, function(data) {   
     $.each(data, function(key,value) { 
      var series = { data: []}; 
      $.each(value, function(key,val) { 
       if (key == 'name') { 
        series.name = val; 
       } 
       else 
       { 
        $.each(val, function(key,val) { 
         var d = val.split(","); 
         var x = Date.UTC(d[0],d[1],d[2]); 
         series.data.push([x,d[3]]); 
        }); 
       } 
      }); 
      options.series.push(series); 
     }); 

Sau khi mã trên, bạn cần phải nhanh chóng biểu đồ:

var chart = new Highcharts.Chart(options); 

Và điều đó phải thật!

Hy vọng rằng người khác tìm thấy câu trả lời này hữu ích và không cần phải tự đánh bại mình trong đầu cho những ngày cố gắng tìm ra. :-)

Answer 2

Chỉ cần kiểm tra với một số mẫu mã cho Highcharts, series cần phải là một mảng của các đối tượng JSON mỗi chứa {"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}, vv

vấn đề chính là đầu ra của bạn từ page2, không phải là một mảng.

Bạn sẽ cần phải sửa chữa $ .each của bạn đầu tiên, bạn cần phải đẩy value, không data:

$.each(data, function(key,value) { 
    options.series.push(value); 
}); 

này sẽ thiết lập đúng cách mỗi mục trong loạt đến đối tượng json đầy đủ.

Sau đó, để sửa chữa kết quả:

$output = []; 
while ($item = mysql_fetch_assoc($result)) {    
    $name = $item['Item1']; 
    $date = str_replace("-",",",$item['Item2']); 
    $pos = $item['Item3']; 

    //I don't think there's supposed to be a comma after this square bracket 
    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ]"); 
    array_push($output, json_encode($arr));  
} 

echo "["; 
foreach($output as $val){ 
    echo $val; 
    if($val != end($output)) echo ","; 
} 
echo "]"; 

Và rằng nên làm điều đó.

Answer 3

Vì phương thức Javascript UTC sẽ trả về bằng Số nguyên, nó chỉ tốt hơn nếu bạn chỉ chuyển Dấu thời gian Unix làm số nguyên khi bạn tạo JSON trên máy chủ thay vì cố gắng chuyển một hàm (UTC.Date) trong JSON - làm cho toàn bộ JSON không hợp lệ!

Vì vậy

Thay vì điều này

while ($item = mysql_fetch_assoc($result)) {    
    $name = $item['Item1']; 
    $date = str_replace("-",",",$item['Item2']); 
    $pos = $item['Item3']; 

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],"); 
    echo json_encode($arr);   
} 

Làm điều này:

while ($item = mysql_fetch_assoc($result)) {    
    $name = $item['Item1']; 
    $unix_date = date("Y-m-d", strtotime($item['Item2'])); 
    $pos = $item['Item3']; 

    $arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],"); 
    echo json_encode($arr);   
} 

Xin lưu ý chúng tôi đang nhân timestamp PHP unix 1000 để làm cho nó JS tương thích.

tham khảo: http://www.w3schools.com/jsref/jsref_utc.asp

Answer 4

Đã bắt đầu PHP5.5

Bạn chỉ có thể thêm này vào json với hàng loạt dữ liệu

$date = '31-12-2015 00:00:00'; 
$datetimeUTC = (strtotime($date) * 1000); 
$data[] = [$datetimeUTC, (float) $value]; 

Answer 5

tôi đi qua các vấn đề gửi timestamps sản xuất bởi mktime() vì highcharts dự kiến ​​thời gian UTC trong khi Dấu thời gian PHP không phải là UTC. Dữ liệu có thể được hiển thị vào một ngày sai trong biểu đồ, vì vậy bạn cũng phải xem xét múi giờ.

function _convertToUTC($timeStamp) { 
    return (int)$timeStamp + (int)date('Z', $timeStamp); 
} 

Mã số Ví dụ sẽ là:

$serie = array(
    'name' => 'title', 
    'data' => array(
     // multiply timestamp by 1000 to get milliseconds 
     array(_convertToUTC(mktime(0,0,0,1,1,2016)) * 1000, 15), 
     array(_convertToUTC(mktime(0,0,0,2,1,2016)) * 1000, 18), 
     array(_convertToUTC(mktime(0,0,0,3,1,2016)) * 1000, 13), 
    ), 
); 
echo json_encode($serie);