JSON returns STRING instead of ARRAY

Question

The following code is returning an array as a string and therefore I cannot distribute the data to popular Flot Chart.

The

PHP code:

<?php

include_once("config.php");

$viagemid = $_POST['id'];
$results_array = array();

$sql = "SELECT adiantamento AS 'Antecipado' FROM viagem WHERE viagemid = $viagemid";
$query = $mysqli->query($sql);
while($row =mysqli_fetch_assoc($query)){

    array_push($results_array, $row);
}

$sql = "SELECT SUM(vl_desp) as 'Despesas' FROM despesas WHERE viagemid = $viagemid";
$query = $mysqli->query($sql);
while($row =mysqli_fetch_assoc($query)){

    array_push($results_array, $row);
}


$sql = "SELECT SUM(venda.vl_venda * venda.qtd) AS 'Venda SP' FROM venda WHERE venda.viagemid = $viagemid AND venda.ufid = 1";
$query = $mysqli->query($sql);
while($row =mysqli_fetch_assoc($query)){

    array_push($results_array, $row);
}

$sql = "SELECT SUM(venda.vl_venda * venda.qtd) AS 'Venda local' FROM venda WHERE venda.viagemid = $viagemid AND venda.ufid = 2";
$query = $mysqli->query($sql);
while($row =mysqli_fetch_assoc($query)){

    array_push($results_array, $row);
}



$string = "[[0,".$results_array[0]['Antecipado']."],[1,".$results_array[1]['Despesas']."],[2,".$results_array[2]['Venda SP']."],[3,".$results_array[3]['Venda local']."]]";


var_dump(json_decode(serialize($results_array), true));

?>

THE JS:

    $(function() {

        $.post('chart_data.php', {id:<?php echo $viagemid; ?>}, function(data) {

            alert(data);
            var d1 = [[0,data],[1,data],[2,data],[3,data]];

            alert(d1);

        var barOptions = {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.6,
                    fill: true,
                    align:'center',
                    fillColor: {
                        colors: [{
                            opacity: 0.8
                        }, {
                            opacity: 0.8
                        }]
                    }
                }
            },
            xaxis: {
                tickDecimals: 0,
                ticks:[[0,'Adiantamento'],[1,'Despesas'],[2,'Venda SP'],[3,'Venda local']]
            },
            colors: ["#ffbb00"], 
            grid: {
                color: "#999999",
                hoverable: true,
                clickable: true,
                tickColor: "#D4D4D4",
                borderWidth:0
            },
            legend: {
                show: false
            },
            tooltip: true,
            tooltipOpts: {
                content: "%x: %y"
            }

        };
        var barData = {
            label: "bar",
            data: d1
        };
        $.plot($("#flot-bar-chart"), [barData], barOptions);

    });

        //return false;
});

Answer 1

Some points to consider:

1) No need to execute 4 querys and travel them repeatedly with while. You can make only one select and use the fetch_all of mysqli.

2) How did you not explain the intention of using the serialize, I see no use in him for that.

include_once("config.php");

$viagemid = $_POST['id'];
$results_array = array();

$sql = <<<SQL
SELECT
(SELECT adiantamento  FROM viagem WHERE viagemid = {$viagemid}) AS 'Antecipado',
(SELECT SUM(vl_desp) FROM despesas WHERE viagemid = {$viagemid}) AS 'Despesas',
(SELECT SUM(venda.vl_venda * venda.qtd) FROM venda WHERE venda.viagemid = {$viagemid} AND venda.ufid = 1) AS 'Venda SP',
(SELECT SUM(venda.vl_venda * venda.qtd) FROM venda WHERE venda.viagemid = {$viagemid} AND venda.ufid = 2) AS 'Venda local' 
SQL;

$query = $mysqli->query($sql);
$result = $query->fetch_all(MYSQLI_ASSOC);


echo json_encode($result, true);

On your call ajax, informed the dataType: JSON, see the options here :

Altere of:

$.post('chart_data.php', {id:<?php echo $viagemid; ?>}, function(data) {

To:

$.ajax({
  type: "POST",
  url: 'chart_data.php',
  data: {id:<?php echo $viagemid; ?>},
  dataType: "json",
  sucess: function(data) {
     alert(data);
        var d1 = [[0,data],[1,data],[2,data],[3,data]];

        alert(d1);

    var barOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 0.6,
                fill: true,
                align:'center',
                fillColor: {
                    colors: [{
                        opacity: 0.8
                    }, {
                        opacity: 0.8
                    }]
                }
            }
        },
        xaxis: {
            tickDecimals: 0,
            ticks:[[0,'Adiantamento'],[1,'Despesas'],[2,'Venda SP'],[3,'Venda local']]
        },
        colors: ["#ffbb00"], 
        grid: {
            color: "#999999",
            hoverable: true,
            clickable: true,
            tickColor: "#D4D4D4",
            borderWidth:0
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: "%x: %y"
        }

    };
    var barData = {
        label: "bar",
        data: d1
    };
    $.plot($("#flot-bar-chart"), [barData], barOptions);
  }
});