AJAX/JSON और PHP

Question

के साथ हाइचार्ट्स डेटा श्रृंखला समस्या यह मेरा पहला अनुरोध है, और मैंने इस मुद्दे पर कई अन्य संबंधित पोस्ट पढ़ी हैं, लेकिन मैं अभी भी अपने wits अंत में अटक गया हूं इस पर ... तो किसी भी मदद की बहुत सराहना की है!

मुझे निम्नलिखित हाइचार्ट्स ऑब्जेक्ट पेज 1.php पर मिला है, और मैं पृष्ठ लोड पर पृष्ठ 2.php से डेटा प्राप्त करने के साथ ही ड्रॉपडाउन विकल्प बदलने पर AJAX का उपयोग कर रहा हूं।

(पढ़ने में आसानी के लिए छोटा कर दिया):

$(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 है 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);   
} 

मेरे json वापसी इस तरह दिखता है:

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

जब मेरा चार्ट लोड होता है, तो यह नीचे 135 सीरीज़ नामों (?!?!?!) में भर जाता है और यह बिंदुओं को दिखाने के लिए प्रतीत नहीं होता है रेखा ग्राफ।

अगर मैं दोहरे उद्धरण चिह्नों और हार्ड कोड श्रृंखला सरणी में परिणाम निकालने के लिए, यह बहुत अच्छा काम करता है (हालांकि मैंने देखा उदाहरण वस्तुओं के बीच एक अल्पविराम है प्रतीत नहीं होता है।

सभी की मदद के लिए धन्यवाद ... विशेष रूप से त्वरित उत्तर! ;-)

Answer 1

हल:

मैं एक जवाब है कि आखिरकार काम मिल गया! निराशाजनक है कि मुझे कई दिनों लगे क्योंकि यह हाइचार्ट्स द्वारा अच्छी तरह से प्रलेखित नहीं किया गया था (और/या शायद jQuert और जावास्क्रिप्ट की मेरी समझ अभी भी नौसिखिया स्तर पर है)।

जवाब अपने json वस्तु में एक प्रेफोर्मेद सरणी के रूप में एक्स/Y डेटा नहीं भेजते है, लेकिन इसके बजाय बस संख्या है कि तारीख (एक्स मूल्य) श्रृंगार और मूल्य (y मूल्य) भेज एक जेसन ऑब्जेक्ट में अल्पविराम से अलग मूल्यों की एक सूची के रूप में, और उसके बाद पार्सिंग और क्लाइंट एंड पर धक्का देना।

उदाहरण के लिए: मैं मूल रूप से

[{"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 ]"]} 

की तरह कुछ भेजने के लिए मेरे पीएचपी पाने के लिए कोशिश कर रहा था लेकिन क्या मैं वास्तव में क्या करने के लिए जरूरी था पहला कदम है की तरह

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

कुछ भेजने यह सुनिश्चित करने के लिए कि आपके पास "श्रृंखला" विकल्प एक खाली सरणी पर सेट है series: []

(मैं इसका उल्लेख करता हूं क्योंकि मैंने देखा है थर्म जवाब जहां यह अलग किया गया था)।

फिर अपने getJSON फ़ंक्शन में, आपको प्रत्येक ऑब्जेक्ट में खींचने के लिए एक नई वस्तु बनाने की आवश्यकता है, जिसमें एक खाली "डेटा" सरणी भी शामिल है (नीचे "var श्रृंखला" देखें)।

फिर घोंसला कुछ $.each छोरों पार्स और उनके आवश्यक विन्यास में, डेटा धक्का, और प्रत्येक वस्तु के "नाम" को भरने के लिए: उपरोक्त कोड के बाद

$.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); 
     }); 

, आप चार्ट का दृष्टांत की जरूरत है:

var chart = new Highcharts.Chart(options); 

और यह होना चाहिए!

उम्मीद है कि किसी और को यह उत्तर उपयोगी लगेगा और इसे समझने की कोशिश करने वाले दिनों के लिए खुद को सिर पर मारने की आवश्यकता नहीं है। :-)

Answer 2

बस, series JSON की एक सरणी वस्तुओं प्रत्येक {"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} आदि

मुख्य समस्या पृष्ठ 2 से अपने उत्पादन है युक्त होने की जरूरत है Highcharts के लिए कुछ नमूना कोड के साथ की जाँच, एक सरणी नहीं है।

आप अपने $ .प्रत्येक को ठीक करना होगा पहले, आप value, नहीं data पुश करने के लिए की जरूरत है:

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

यह ठीक से पूरा json वस्तु को श्रृंखला में प्रत्येक आइटम सेट हो जाएगा।

फिर उत्पादन ठीक करने के लिए:

$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 "]"; 

और है कि यह करना चाहिए।

Answer 3

चूंकि जावास्क्रिप्ट यूटीसी विधि एक इंटीजर के साथ वापस आ जाएगी, यह बेहतर है कि अगर आप यूनिक्स टाइमस्टैम्प को एक पूर्णांक के रूप में पास करते हैं तो जब आप किसी फ़ंक्शन को पास करने की बजाय सर्वरसाइड पर जेएसओएन उत्पन्न कर रहे हैं (UTC.Date) JSON में - जो पूरे JSON को अमान्य बनाता है!

तो

इस

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);   
} 

के बजाय

यह करें:

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);   
} 

कृपया इसे संगत जे एस बनाने के लिए ध्यान दें कि हम 1000 से पीएचपी यूनिक्स टाइमस्टैम्प गुणा कर रहे हैं।

संदर्भ: http://www.w3schools.com/jsref/jsref_utc.asp

Answer 4

PHP5.5

चेक इन

आप बस डेटा श्रृंखला

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

Answer 5

साथ json में इस जोड़ सकते हैं मैं mktime द्वारा उत्पादित timestamps भेजने की समस्या में आए() क्योंकि हाईचार्ट्स यूटीसी समय की अपेक्षा करते हैं जबकि PHP टाइमस्टैम्प यूटीसी नहीं है। डेटा चार्ट में गलत दिन पर दिखाया जा सकता है, इसलिए आपको समय क्षेत्र पर भी विचार करना होगा।

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

कोड उदाहरण होगा:

$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);