Dynamic Chart.js using PHP

<?php
$dataPoints = array(
  array( "data" => 4 , "label" => "Gold Star" , "backgroundColor" => "rgba(255,215,0,1)"),
  array( "data" => 2 , "label" => "Green Light" , "backgroundColor" => "rgba(0,128,0,1)"),
  array( "data" => 0 , "label" => "Yellow Light" , "backgroundColor" => "rgba(255,255,0,1)"),
  array( "data" => 0 , "label" => "Red Light" , "backgroundColor" => "rgba(255,0,0,1)" )
);

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <script src="../assets/chart28/dist/Chart.js"></script>
    <canvas id="myChart" width="100" height="20"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Gold Star', 'Green Light', 'Yellow Light', 'Red Light'],
        datasets: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
</body>
</html>