How to add an array of objects to chartjs?

How to add an array of objects to chartjs.The controller of that view sends to the template twig an array through the variable {{cg}}. The way I am doing it I get an error that what I’m going through is an array of array. In the labels attribute I want put the arrangement of months and in the attribute data the fix of imp. Please have any idea of ​​this? Controller:

/** Controller
 * @Route("/cg1", name="cg1")
 */
public function cg1Action()
{
    $conn=$this->get('database_connection');
    $consulta="SELECT consumo_combustible.importe as imp,MONTH(consumo_combustible.fecha) as mes FROM consumo_combustible WHERE YEAR(consumo_combustible.fecha)=2018";
    $sql=$conn->fetchAll($consulta);      
    return $this->render('default/consultag1.html.twig', array('cg' => $sql));
}

//————– //- AREA CHART – //————–

         // Get context with jQuery - using jQuery's .get() method.
         var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
         // This will get the first returned node in the jQuery collection.
         var areaChart       = new Chart(areaChartCanvas)
         var datames = []
         datames={{ cg.mes }} ;
         var dataimp = [] ;

         dataimp={{ cg.imp }} ;
         var areaChartData = {
             labels  : datames,
             datasets: [
                 {
                     label               : 'Electronics',
                     fillColor           : 'rgba(210, 214, 222, 1)',
                     strokeColor         : 'rgba(210, 214, 222, 1)',
                     pointColor          : 'rgba(210, 214, 222, 1)',
                     pointStrokeColor    : '#c1c7d1',
                     pointHighlightFill  : '#fff',
                     pointHighlightStroke: 'rgba(220,220,220,1)',
                     data                :  dataimp
                 },
                 {
                     label               : 'Digital Goods',
                     fillColor           : 'rgba(60,141,188,0.9)',
                     strokeColor         : 'rgba(60,141,188,0.8)',
                     pointColor          : '#3b8bba',
                     pointStrokeColor    : 'rgba(60,141,188,1)',
                     pointHighlightFill  : '#fff',
                     pointHighlightStroke: 'rgba(60,141,188,1)',
                     data                :  dataimp
                 }
             ]
         }

throws the following error:

Key “mes” for array with keys “0, 1, 2, 3, 4, 5” does not exist in defaultconsultag1.html.twig at line 55

Answer

This is the solution, through the raw function {{result | raw}}, I get the value that the controller sends to the view and ready

  var valormes=[];
  var valorimp=[];  

  //arr= [{"imp":"3000","mes":"2"},{"imp":"830","mes":"3"},{"imp":"1900","mes":"4"}];

  var arr= JSON.parse('{{ resultado|raw }}');

  for(var i=0; i< arr.length; i++){
       valormes[i]=arr[i].mes;
       valorimp[i]=arr[i].imp;
  }

  console.log(valormes);

  console.log(valorimp);



  var areaChartData = {

  labels  :  valormes,
  datasets: [
    {
      label               : '2018',
      fillColor           : 'rgba(210, 214, 222, 1)',
      strokeColor         : 'rgba(210, 214, 222, 1)',
      pointColor          : 'rgba(210, 214, 222, 1)',
      pointStrokeColor    : '#c1c7d1',
      pointHighlightFill  : '#fff',
      pointHighlightStroke: 'rgba(220,220,220,1)',
      data                : valorimp
    }

  ]
}

 /**
 * @Route("/cg1", name="cg1")
 * @Method({"GET", "POST"})
 */
public function cg1Action(Request $request)
{
    $conn=$this->get('database_connection');
    $consulta="SELECT SUM(consumo_combustible.importe) as imp, MONTH(consumo_combustible.fecha) as mes FROM consumo_combustible WHERE YEAR(consumo_combustible.fecha)=2018 GROUP BY consumo_combustible.fecha";
    $sql=$conn->fetchAll($consulta);
    $jsonResponse = json_encode($sql);

    echo($jsonResponse);
    return $this->render('default/consultag1.html.twig',array(
        'respuesta' => $jsonResponse

    ));
}