Convert PHP return data to JavaScript object

Question

I have a data set that should be in the same format as the JavaScript variable, as shown below:

var theData = {
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ],
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"]
};

The data is built in PHP, but I can’t understand how this happens.

Here is what I have in PHP (sample data, but the same method of filling it):

$data = array();

$data['datasets'][1]['label']           = "First Data Set";
$data['datasets'][1]['borderColor']     = "rgba(30, 87, 153, .9)";
$data['datasets'][1]['backgroundColor'] = "rgba(30, 87, 153, .5)";

$data['datasets'][2]['label']           = "Afternoon";
$data['datasets'][2]['borderColor']     = "rgba(41, 137, 216, .9)";
$data['datasets'][2]['backgroundColor'] = "rgba(41, 137, 216, .5)";

// Loop through some foreachs and fill the $data
// Not the actual loop I use but same principle

foreach ($theData as $data)
{
    $data['datasets'][1]['data'][] = data;
}

foreach ($otherData as $data)
{
    $data['datasets'][2]['data'][] = data;
}

This goes back to JavaScript using json_encode();when I do. console.log(JSON.stringify(theData))I get this:

{
    "datasets":{
        "1":{
            "label":"Morning",
            "borderColor":"rgba(125, 185, 232, .9)",
            "backgroundColor":"rgba(125, 185, 232, .5)",
            "borderWidth":1,
            "data":[
                "24",
                0,
                0,
                "30",
                "24",
                "36",
                "36"
            ]
        },
        "2":{
            "label":"Afternoon",
            "borderColor":"rgba(41, 137, 216, .9)",
            "backgroundColor":"rgba(41, 137, 216, .5)",
            "borderWidth":1,
            "data":[
                "24",
                0,
                0,
                "24",
                "24",
                "30",
                "36"
            ]
        }
    },
    "labels":[
        "Sun Aug 14",
        "Mon Aug 15",
        "Tue Aug 16",
        "Wed Aug 17",
        "Thu Aug 18",
        "Fri Aug 19",
        "Sat Aug 20"
    ]
}

This is for Chart.js 2.3. Sample data from top to bottom are directly from Chart.js sample data. JSON above are my results. Since they are not identical, the chart does not work. Can I modify my PHP to make it look more like a sample at the top?

Answer 1

• theData - object
• datasets array of objects
• labels - array

,

$data = array();
$data['datasets'] = array();
$data['datasets'][] = array("label" => "First Data Set",
     "borderColor" => "rgba(30, 87, 153, .9)",
     "backgroundColor" => "rgba(30, 87, 153, .5)"
     );
$data['datasets'][] = array("label" => "Second Data Set",
     "borderColor" => "rgba(41, 137, 216, .9)",
     "backgroundColor" => "rgba(41, 137, 216, .9)"
     );

$data['labels'] = array("Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running");

echo json_encode($data);

, json_encode

{
  "datasets": [
    {
      "label": "First Data Set",
      "borderColor": "rgba(30, 87, 153, .9)",
      "backgroundColor": "rgba(30, 87, 153, .5)"
    },
    {
      "label": "Second Data Set",
      "borderColor": "rgba(41, 137, 216, .9)",
      "backgroundColor": "rgba(41, 137, 216, .9)"
    }
  ],
  "labels": [
    "Eating",
    "Drinking",
    "Sleeping",
    "Designing",
    "Coding",
    "Cycling",
    "Running"
  ]
}