1

Como agregar un array de objetos a chartjs. El controlador de esa vista envía a la plantilla twig un array de objeto.De la forma en que lo estoy haciendono se muestran los valores de mes e imp.En el atributo labels quiero poner el arreglo de meses y en el atributo data el arreglo de imp .Por favor tienen alguna idea de esto? Controlador:

     /**
 * @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

    ));
}

Plantilla Twig, código js

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

         $.ajax({
             url: 'http://localhost/PECNEA/web/app_dev.php/cg1', //Tu archivo donde estará tu consulta
             type: 'POST',
             dataType: 'json',
         })
             .done(function(respuesta) {
                 for (var i = 0; i < respuesta.results.length - 1; i++) {
                     var items = console.log(respuesta.results[i]);

                     valormes.push(items.mes)
                     valorimp.push(items.imp)

                 }


             })
             .fail(function() {
                 console.log("Error al cargar el arreglo");
             });

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
    }

  ]
}
5
  • ¿Cúal es el formato de tu objeto cg? ¿Que dice el mensaje de error?
    – farsSharp
    Commented el 23 abr. 2019 a las 21:54
  • Cg es un arreglo de arreglo. Mire la consulta sql que está dentro de la función de la clase controladora es el primer código que colgué. Commented el 24 abr. 2019 a las 3:11
  • Con {{cg.mes}} obtengo un arreglo al igual que con {{cg.imp}} en el error me menciona que los dos son array y por supuesto tienen igual dimensión Commented el 24 abr. 2019 a las 3:31
  • [{"imp":"600","mes":"1"},{"imp":"400","mes":"2"},{"imp":"2200","mes":"3"}] Commented el 25 abr. 2019 a las 17:45
  • Ese formato, tu Array[objetc] no es el adecuado para char.js
    – farsSharp
    Commented el 25 abr. 2019 a las 17:51

2 respuestas 2

0

Para los labels y data de chart.js solo le valen los array[value]. Debes de extraer esa información para cargarla en la configuración del chart.

let arrmes = cg.map(mes => cg.mes);
let arrimp = cg.map(mes => cg.imp);

var areaChartData = {

  labels  : {{arrmes}}
  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                : {{arrimp}}
    }

  ]
}
4
  • Tuve que realizar algunos cambios utilizando json para poder obtener el array dentro del código js Commented el 25 abr. 2019 a las 18:20
  • Edité nuevamente la publicación si tienes alguna idea sobre esto, le agradecería que me ayudara. Commented el 25 abr. 2019 a las 18:44
  • @BarbaraRossVeitia si vos cambias tu pregunta a cada rato, las respuestas dejan de ser validas. Por favor, has una pregunta, y cuando este contestada pasa a otra pregunta distinta, si no hay que estar modificando a cada rato la respuesta y esa no es la finalidad.
    – gbianchi
    Commented el 25 abr. 2019 a las 18:47
  • tienes toda la razón Commented el 25 abr. 2019 a las 18:53
0

Tan sencillo como esto, la variable resultado dentro del código js la obtengo con var arr= JSON.parse('{{ resultado|raw }}'); Demostración del código js:

  var valormes=[];
  var valorimp=[];  
  // Estructura que tiene el arreglo a través de la variable resultado que envía el controlador a la vista twig 
  //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
    }

  ]
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.