как создавать графики на основе моих данных с помощью charts.js в Symfony 3

Question

Я бы хотел, чтобы у моего космического доктора был график, который позволил бы ему видеть количество назначений в месяц. Таким образом, я создал контроллер и свой репозиторий, которые позволяют мне иметь количество назначений / месяц, и я имею в виду вызов charts.js, который отображает график с предварительно заполненными данными, но я хочу, чтобы график был сделано с моими данными результата из моего запроса количество встреч в месяц.

Контроллер

 public function statistiqueAction()
{

    $em = $this->getDoctrine->getManager;
    $repos = $em->getRepository("DoctixFrontBundle:Booking");
    $nb = $repos->getNb();


     return $this->render('DoctixMedecinBundle:Medecin:index.html.twig', array(
        'nb' => $nb 
     ));
}

Репозиторий

    namespace Doctix\FrontBundle\Repository;

 /**
 * BookingRepository
 *
 * This class was generated by the Doctrine ORM. Add your own custom
 * repository methods below.
 */
class BookingRepository extends \Doctrine\ORM\EntityRepository
{

public function getNb(){

    $qb = $this->createQueryBuilder('b')
               ->select('COUNT(b.id) AS nbr_rdv, MONTH(b.date_rdv) AS mois')
               ->groupBy('mois');

        return $qb->getQuery()
                  ->getResult();

}
}

Charts.js и View

// Chart.js scripts
// -- Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// -- Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
    datasets: [{
      label: "Sessions",
      lineTension: 0.3,
      backgroundColor: "rgba(2,117,216,0.2)",
      borderColor: "rgba(2,117,216,1)",
      pointRadius: 5,
      pointBackgroundColor: "rgba(2,117,216,1)",
      pointBorderColor: "rgba(255,255,255,0.8)",
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(2,117,216,1)",
      pointHitRadius: 20,
      pointBorderWidth: 2,
      data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
    }],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 40000,
          maxTicksLimit: 5
        },
        gridLines: {
          color: "rgba(0, 0, 0, .125)",
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

<div class="box_general padding_bottom">
            <div class="header_box version_2">
                <h2><i class="fa fa-bar-chart"></i>Statistiques 222</h2>
            </div>
            <canvas id="myAreaChart" width="100%" height="30" style="margin:45px 0 15px 0;"></canvas>
        </div>

Спасибо