通过ajax填充多维数组

Question

Update

I get an error syntax error, unexpected '{', expecting ']' on the line below:

<?php
$data['datasets'] = [{
                        label: 'Quotation',
                        backgroundColor: '#96ccf1',
                        borderWidth: 1,
                        data: [
                            100,500,5000,800,500
                        ]
                    },{
                        label: 'Purchase Order',
                        backgroundColor: '#96ccf1',
                        borderWidth: 1,
                        data: [
                            100,500,5000,800,500
                        ]
                    },{
                        label: 'Invoice',
                        backgroundColor: '#96ccf1',
                        borderWidth: 1,
                        data: [
                            100,500,5000,800,500
                        ]
                    }];
?>

I have the original js code which I want to change into dynamic data retrieval. I'm able to change the labels part but unable to change the datasets part.

Given the original data looks like (refer below), how to amend my PHP code so that when passed through ajax it can successfully display the correct data? Am I missing some quotes here and there??

Thank you.

Original JS code (static)

$.ajax({
    url: "action.php",
    type: "POST",
    data: {'action':'RetrieveData'},
    dataType: "json",
    success: function(data) {
        console.log(data);

        if(data.status=='success'){
            var barChartData = {
                labels: ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"],
                datasets: [{
                            label: 'Quotation',
                            backgroundColor: '#96ccf1',
                            borderWidth: 1,
                            data: [
                                100,500,5000,800,500
                            ]
                        }, {
                            label: 'Purchase Order',
                            backgroundColor: '#FAD84E',
                            borderWidth: 1,
                            data: [
                                100,500,2500,800,500
                            ]
                        }, {
                            label: 'Invoice',
                            backgroundColor: '#9FFA4E',
                            borderWidth: 1,
                            data: [
                                100,500,2000,800,0
                            ]
                        }]
            };

            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title_text
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    }
                }
            });
        }
    },
    error: function(data){
        console.log('Error occurred');
    }
});

Amended JS code (dynamic)

$.ajax({
    url: "action.php",
    type: "POST",
    data: {'action':'RetrieveData'},
    dataType: "json",
    success: function(data) {
        console.log(data);

        if(data.status=='success'){
            var barChartData = {
                labels: data.labels, // <-- This is correct
                datasets: data.datasets // <-- I need help on this part
            };

            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: data.title_text
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    }
                }
            });
        }
    },
    error: function(data){
        console.log('Error occurred');
    }
});

PHP code

$data['labels'] = ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"];
$data['datasets'] = [{
                        label: 'Quotation',
                        backgroundColor: '#96ccf1',
                        borderWidth: 1,
                        data: [
                            100,500,5000,800,500
                        ]
                    },{
                        label: 'Purchase Order',
                        backgroundColor: '#96ccf1',
                        borderWidth: 1,
                        data: [
                            100,500,5000,800,500
                        ]
                    },{
                        label: 'Invoice',
                        backgroundColor: '#96ccf1',
                        borderWidth: 1,
                        data: [
                            100,500,5000,800,500
                        ]
                    }];

echo json_encode($data); 

Answer 1

If you want to create an object like {label: 'some name'} you can use a class or an associative array ['label' => 'some name']. PHP isn't be able to create one of the previous mentioned elements out of an {}.

$data['labels'] = ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"];
$data['datasets'] = [[
                        'label' => 'Quotation',
                        'backgroundColor' => '#96ccf1',
                        'borderWidth' => 1,
                        'data' => [
                            100,500,5000,800,500
                        ]
                    ],[
                        'label' => 'Purchase Order',
                        'backgroundColor' => '#96ccf1',
                        'borderWidth' => 1,
                        'data' => [
                            100,500,5000,800,500
                        ]
                    ],[
                        'label' => 'Invoice',
                        'backgroundColor' => '#96ccf1',
                        'borderWidth' => 1,
                        'data' => [
                            100,500,5000,800,500
                        ]
                    ]];

echo json_encode($data);