Passing json_encode to chart.js won't work

Question

I'm trying to create a pie chart using chart.js (newest version).

I've made an array, which I'd want to output as the data variable for the chart.

That's the PHP code:

<?php if($os != null) {
   $tiposOs = array('Orçamento'=> "#5DC1E3",
                    'Aberto'=> "#07D7F7",
                    'Faturado' => "#07F7CB",
                    'Em Andamento' => "#FFD724",
                    'Finalizado' => "#30C70A",
                    'Cancelado' => "#FF2B2B");
    $chartOsData = array();
    $chartOsData['type'] = 'pie';
    $chartOsData['data'] = array();
    $chartOsData['options'] = array('responsive'=>true);

    foreach ($os as $o)
    {
        $chartOsData['data']['labels'][] = $o->status;
        $chartOsData['data']['datasets']['data'][] = (int)$o->total;
        $chartOsData['data']['datasets']['backgroundColor'][] = $tiposOs[$o->status];
    }
?>

This is my script with encoded values:

<script type="text/javascript">
    $(document).ready(function(){
        var osChartc = document.getElementById('osChart').getContext('2d');
        var osChart = new Chart(osChartc, <?php echo json_encode($chartOsData); ?>);
    });
</script>

According to the documentation, this is how you create a chart:

var myDoughnutChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
});

And this is the kind of input for the data variable:

var data = {
    labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
};

This is what I'm getting:

$(document).ready(function() {
    var osChartc = document.getElementById('osChart').getContext('2d');
    var osChart = new Chart(osChartc,{
        "type": "pie",
        "data": {
            "labels": ["Aberto", "Em Andamento"],
            "datasets": {
                "data": [1, 1],
                "backgroundColor": ["#07D7F7", "#FFD724"]
            }
        },
        "options": {
            "responsive": true
        }
    });
});

I believe the array format is correct, except that the keys have quotes around them, and there is no square brackets on the datasets.

The chart is not being built and I'm getting this error:

Uncaught TypeError: Cannot read property 'length' of undefined

What can be done?

Answer 1

$chartOsData['data']['datasets']['data'][] = (int)$o->total;
$chartOsData['data']['datasets']['backgroundColor'][] = $tiposOs[$o->status];

Here you're constructing datasets as an object with the keys data and backgroundColor.

datasets: [
    {
        data: [300, 50, 100],
        backgroundColor: [...],
    }
]

Here you're showing that datasets should be an array containing one object with those keys.

The fix is simple: make datasets an array:

$chartOsData['data']['datasets'][0]['data'][] = (int)$o->total;
$chartOsData['data']['datasets'][0]['backgroundColor'][] = $tiposOs[$o->status];
                                ^^^