Путь PHP-массив в ответ AJAX в массив JQuery

Question

У меня возникли проблемы с отображением результата запроса MySQL в качестве набора данных для графика. Я не уверен, как передать результаты, которые я получаю как простой массив. Он отлично работает в php и работает запрос ajax, но (я предполагаю) он не может форматировать в правильный формат jquery/javascript для массива. Вот суть моего кода:

JavaScript часть на главной странице, которая рисует график:

<script> 
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 

    var lineChartData = { 
     labels : ["January","February","March","April","May","June","July"], 
     datasets : [ 
      { 
       label: "Fast Signal", 
       fillColor : "rgba(220,220,220,0.2)", 
       strokeColor : "rgba(220,220,220,1)", 
       pointColor : "rgba(220,220,220,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(220,220,220,1)", 
       data : getFast() 
      }, 
      { 
       label: "Slow Signal", 
       fillColor : "rgba(151,187,205,0.2)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(151,187,205,1)", 
       data : getSlow() 
      } 
     ] 

    } 

window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true 
    }); 
} 


</script> 

AJAX на главной странице, которая вызывается, когда граф нагрузки:

<script type="text/javascript"> 
function test(){ 
    alert("test"); 
    } 
function getAll(){ 
      $.ajax({ 
       type:"POST", 
       url:"dataproc.php", 
       data:{ action: true, 
         all: true 

       }, 
       success:function(data){ 
        $("#dataDiv").html(data); 
       } 
      }); 
     } 
function getFast(){ 
      $.ajax({ 
       type:"POST", 
       url:"dataproc.php", 
       data:{ action: true, 
         fast: true 

       }, 
       success:function(data){ 
        $("#fastDiv").html(data); 
        return data; 
       } 
      }); 
     } 
function getSlow(){ 
      $.ajax({ 
       type:"POST", 
       url:"dataproc.php", 
       data:{ action: true, 
         slow: true 

       }, 
       success:function(data){ 
        $("#slowDiv").html(data); 
        return data; 
       } 
      }); 
     } 
function getHisto(){ 
      $.ajax({ 
       type:"POST", 
       url:"dataproc.php", 
       data:{ action: true, 
         histo: true 

       }, 
       success:function(data){ 
        $("#histoDiv").html(data); 
        return data; 
       } 
      }); 
     } 
</script> 

И удаленная страница для вызова AJAX:

<?php 
if(isset($_POST['action'])){ 
    if(isset($_POST['all'])){ 
     define("DB_DSN", "mysql:host=localhost;dbname=BTCUSD"); //db conn 
     define("DB_USERNAME","prices"); //db user 
     define("DB_PASSWORD","********"); // db pass 
     try { 
      //echo "Current Price: $".$current; 
      $con = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); 
      $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
      $sql = "SELECT * FROM 5Minute ORDER BY timestamp ASC"; 
      $stmt = $con->prepare($sql); 
      $stmt->execute(); 
      $valid = $stmt->fetchAll(); 
      $con = null; 

      if($valid){ 
       foreach($valid as $res){ 
        $prices[] = (float)$res["price"]; 
       } 
       $macdArr = trader_macd($prices,12,26,9); 
       if(end($macdArr[0]) && end($macdArr[1]) && end($macdArr[2])){ 
        echo json_encode($macdArr, JSON_NUMERIC_CHECK); 



       } 
      } 
     }catch(PDOException $e){ 
      echo "Error: ".$e->getMessage(); 
     } 
     $con = null; 
    } 
    if(isset($_POST['fast'])){ 
     define("DB_DSN", "mysql:host=localhost;dbname=BTCUSD"); //db conn 
     define("DB_USERNAME","prices"); //db user 
     define("DB_PASSWORD","*******"); // db pass 
     try { 
      //echo "Current Price: $".$current; 
      $con = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); 
      $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
      $sql = "SELECT * FROM 5Minute ORDER BY timestamp ASC"; 
      $stmt = $con->prepare($sql); 
      $stmt->execute(); 
      $valid = $stmt->fetchAll(); 
      $con = null; 

      if($valid){ 
       foreach($valid as $res){ 
        $prices[] = (float)$res["price"]; 
       } 
       $macdArr = trader_macd($prices,12,26,9); 
       if(end($macdArr[0]) && end($macdArr[1]) && end($macdArr[2])){ 
        $fastArr = array(); 
        foreach($macdArr[0] as $fastVal){ 
         $fastArr[] = $fastVal; 
        } 
        echo json_encode($fastArr, JSON_NUMERIC_CHECK);; 
       } 
      } 
     }catch(PDOException $e){ 
      echo "Error: ".$e->getMessage(); 
     } 
     $con = null; 
    } 
    if(isset($_POST['slow'])){ 
     define("DB_DSN", "mysql:host=localhost;dbname=BTCUSD"); //db conn 
     define("DB_USERNAME","prices"); //db user 
     define("DB_PASSWORD","********"); // db pass 
     try { 
      //echo "Current Price: $".$current; 
      $con = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); 
      $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
      $sql = "SELECT * FROM 5Minute ORDER BY timestamp ASC"; 
      $stmt = $con->prepare($sql); 
      $stmt->execute(); 
      $valid = $stmt->fetchAll(); 
      $con = null; 

      if($valid){ 
       foreach($valid as $res){ 
        $prices[] = (float)$res["price"]; 
       } 
       $macdArr = trader_macd($prices,12,26,9); 
       if(end($macdArr[0]) && end($macdArr[1]) && end($macdArr[2])){ 
        $slowArr = array(); 
        foreach($macdArr[1] as $slowVal){ 
         $slowArr[] = $slowVal; 
        } 
        echo json_encode($slowArr, JSON_NUMERIC_CHECK);; 
       } 
      } 
     }catch(PDOException $e){ 
      echo "Error: ".$e->getMessage(); 
     } 
     $con = null; 
    } 
    if(isset($_POST['histo'])){ 
     define("DB_DSN", "mysql:host=localhost;dbname=BTCUSD"); //db conn 
     define("DB_USERNAME","prices"); //db user 
     define("DB_PASSWORD","*******"); // db pass 
     try { 
      //echo "Current Price: $".$current; 
      $con = new PDO(DB_DSN, DB_USERNAME, DB_PASSWORD); 
      $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
      $sql = "SELECT * FROM 5Minute ORDER BY timestamp ASC"; 
      $stmt = $con->prepare($sql); 
      $stmt->execute(); 
      $valid = $stmt->fetchAll(); 
      $con = null; 

      if($valid){ 
       foreach($valid as $res){ 
        $prices[] = (float)$res["price"]; 
       } 
       $macdArr = trader_macd($prices,12,26,9); 
       if(end($macdArr[0]) && end($macdArr[1]) && end($macdArr[2])){ 
        $histoArr = array(); 
        foreach($macdArr[2] as $histoVal){ 
         $histoArr[] = $histoVal; 
        } 
        echo json_encode($histoArr, JSON_NUMERIC_CHECK);; 
       } 
      } 
     }catch(PDOException $e){ 
      echo "Error: ".$e->getMessage(); 
     } 
     $con = null; 
    } 
} 
?> 

Когда я эхо вывод в DIV в качестве успешного запроса AJAX, он точно показывает, как это:

[-1,066, -0,995, -0,927, -0,863, -0,804, -0,746, -0,739, -0.687]

Каков правильный формат для поля данных в графике, однако граф не будет рисовать.

Я ошибаюсь, полагая, что «возвращать данные»; это правильный способ передать результат массива обратно в jquery/javascript после вызова ajax?

Любая помощь была бы принята с благодарностью, спасибо!

Answer 1

Вы должны инициализировать график после завершения вызова ajax.

Например:

var data1; 
var data2; 

$(document).ready(function() { 
    //get the first data 
    .ajax({ 
     type:"POST", 
     url:"dataproc.php", 
     data:{ action: true, 
       slow: true 

     }, 
     success:function(data){ 
      data1 = data; 
      getSecondData(); //call to get second data 
     } 
    } 
}); 

function getSecondData() 
{ 
    .ajax({ 
     type:"POST", 
     url:"dataproc.php", 
     data:{ action: true, 
       histo: true 

     }, 
     success:function(data){ 
      data2 = data; 
      drawGraph(); //now draw 
     } 
    } 
} 

function drawGraph() 
{ 
    //draw graph with data 1 and data2 
}