Populate multi-dimension array through 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);

What do you mean by "unable" ? Do you have an error in the console ? — Goufalite
– Goufalite, Commented Oct 13, 2017 at 7:43

Julian Hilbers · Accepted Answer · 2017-10-13 11:23:37Z

3

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

edited Oct 13, 2017 at 11:23

answered Oct 13, 2017 at 8:02

Julian Hilbers

1272 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matey Over a year ago

PHP understands objects, it just has a different notation

Julian Hilbers Over a year ago

Your're absolutely right I've chosen the wrong wording and will update my answer.

4 Leave Cover Over a year ago

So basically JS object use {'key':'value'} while PHP object use ['key'=>'value'] is it?

Collectives™ on Stack Overflow

Populate multi-dimension array through ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related