1

Hola nunca habia trabajado con un json, y no tengo ni idea de como es que se puede leer para graficarlo en chartjs, este es mi json

[
   {
      "Anio":2016,
      "Bovino":"48,148.76",
      "Porcino":"10,153.27"
   },
   {
      "Anio":2017,
      "Bovino":"45,501.43",
      "Porcino":"10,801.30"
   },
   {
      "Anio":2018,
      "Bovino":"46,365.48",
      "Porcino":"11,010.21"
   },
   {
      "Anio":2019,
      "Bovino":"44,627.29",
      "Porcino":"10,228.82"
   }
]
También estoy aprendiendo a realizar gráficas en chartjs, solo se crear graficas ingresando los datos de forma manual, alguien me podría ayudar a que se grafique ese json en chartjs

He intentado con el siguiente ejemplo

var jsonfile = {
   "jsonarray": [
   {
      "Anio":2016,
      "Bovino":"48,148.76",
      "Porcino":"10,153.27"
   },
   {
      "Anio":2017,
      "Bovino":"45,501.43",
      "Porcino":"10,801.30"
   },
   {
      "Anio":2018,
      "Bovino":"46,365.48",
      "Porcino":"11,010.21"
   },
   {
      "Anio":2019,
      "Bovino":"44,627.29",
      "Porcino":"10,228.82"
   }
]
};

var labels = jsonfile.jsonarray.map(function(e) {
   return e.Anio;
});
var data = jsonfile.jsonarray.map(function(e) {
   return e.Bovino,e.Porcino;
});;

var ctx = canvas.getContext('2d');
var config = {
   type: 'bar',
   data: {
      labels: labels,
      datasets: [{
         label: ['Bovino','Porcino']
         data: data,
         backgroundColor: 'rgba(0, 119, 204, 0.3)'
      }]
   }
};

var chart = new Chart(ctx, config);

no me aparece nada en pantalla eso significa que esta mal, pero no se cual es mi error

3
  • ¿Has comprobado que lo que contiene la variable labels and data es lo correcto? Comprueba eso porque, desde aquí, es lo que tiene más pinta de que te esté provocando el problema. el 27 oct. 2020 a las 7:23
  • Como dice Sergio creo que tu problema es return e.Bovino,e.Porcino;. ¿Qué quieres mostrar como data?
    – milmal
    el 27 oct. 2020 a las 7:31
  • En la respuesta que me dejo Pablo Lozano era exactamente lo que trataba de hacer; gracias por sus comentarios
    – Ale
    el 27 oct. 2020 a las 18:16

1 respuesta 1

2

Tienes fallos tanto en sintaxis como en el uso del API de Charts.js. Además, los datos los tienes como texto, con lo que hay que transformarlos a número para que sean entendibles.

Creo que lo que quieres conseguir es algo así:

const jsonfile = {
   "jsonarray": [
   {
      "Anio":2016,
      "Bovino":"48,148.76",
      "Porcino":"10,153.27"
   },
   {
      "Anio":2017,
      "Bovino":"45,501.43",
      "Porcino":"10,801.30"
   },
   {
      "Anio":2018,
      "Bovino":"46,365.48",
      "Porcino":"11,010.21"
   },
   {
      "Anio":2019,
      "Bovino":"44,627.29",
      "Porcino":"10,228.82"
   }
]
};

const labels = jsonfile.jsonarray.map(function(e) {
   return e.Anio;
});
// dos datasets: porcino y bovino
// quitamos el separador y transformamos a número (con el operador +)
const dataBovino = jsonfile.jsonarray.map(function(e) {
   return +e.Bovino.replace(',',''); 
});

const dataPorcino = jsonfile.jsonarray.map(function(e) {
   return +e.Porcino.replace(',','');
});
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

//ponemos los dos datasets por separado:
const config = {
   type: 'bar',
   data: {
      labels: labels,
      datasets: [{
         label: 'Bovino',
         data: dataBovino,
         backgroundColor: 'rgba(0, 119, 204, 0.3)'
      },
      {
         label: 'Porcino',
         data: dataPorcino,
         backgroundColor: 'rgba(230, 119, 204, 0.3)'
      }]
   }
};

const chart = new Chart(ctx, config);
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas></canvas>

Tu Respuesta

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

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