Push PHP Array into AJAX response into JQuery array

Question

I am having trouble outputting the result of a MySQL query into being the dataset for a graph. I am not sure how to pass the results I get as a simple array. It echos out fine in php and the ajax request works, but (I am assuming) it is failing to format into the correct jquery/javascript format for an array. Here is the gist of my code:

JavaScript part on main page that draws the graph:

<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 on main page that gets called when the graph loads:

<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>

And the remote page for the AJAX call:

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

When I echo the output into a div as a successful AJAX query, it shows exactly like this:

[-1.066,-0.995,-0.927,-0.863,-0.804,-0.746,-0.739,-0.687]

Which is the correct format for the data field in the chart script, however the graph wont draw.

Am I wrong in assuming that "return data;" is the correct way of passing an array result back to jquery/javascript after an ajax call?

Any help would be greatly appreciated, thanks!

Please distill this code to the relevant areas. This has got to be about a full meter or two tall. — 1252748, Dec 26 '14 at 08:04
Which JavaScript library OR Plugin you are using for charting? does it have a documentation? — Dharmang, Dec 26 '14 at 08:46

score 0 · Answer 1 · answered Dec 26 '14 at 09:16

You should initialize the graph after the ajax call ends.

For example:

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
}

Push PHP Array into AJAX response into JQuery array

1 Answers1