Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

392
Vistas
How to get data from API through vue chartjs?

this is my first time posting here, i'm working on an application where i need to get data from an API and show it through a chart (i'm using vue chart js). The code is almost done, i can see in the console the API's data.

Showing API's data in console

This is my chart/api conection:

<template>
   <div>
      <bar-chart      
        :data="barChartData"
        :options="barChartOptions"
        :height="150"
        :width="150"
       />
   </div>
</template>

<script>
import BarChart from "~/components/BarChart";

const chartColors = {
   grey: "rgba(210, 210, 210, 0.2)",
   white: "rgb(255,255,255)",
};

export default {
   components: {
      BarChart,
 },
 data() {
   return {
      barChartData: {
         asistencia: [],
         labels: [],
         datasets: [
         {
            label: "Income",
            backgroundColor: [chartColors.white, chartColors.grey],
            data: [0,0],
         },
       ],
     },
     barChartOptions: {
       responsive: true,
     legend: {
       display: true,
    },
  },
};
},
async fetch() {
this.asistencia = await fetch(
    'http://127.0.0.1:8000/apiasistenciausuarioAsistenciaUsuario/',
  ).then(res => res.json())
  console.log(this.asistencia);
},
components: {
  BarChart,
},
methods: {
  refresh() {
    this.datos();

    this.$nuxt.refresh();

  },
  datos() {
    this.barChartData.datasets[0].data = [
      this.res.is_presente,
    ];
  },
}
};

As you can see i send the data to the console but the "Asistencia" graphic is not showing and that's because it isn't getting the data sucessfully

  datos() {
     this.barChartData.datasets[0].data = [
        this.res.is_presente,
      ];

barChartData should get the data from "is_presente" var from the API but that var is a boolean so i was thinking on doing a validation to check when it's true/false and make a counter to fill the graphic.

  datos() {
     this.barChartData.datasets[0].data = [
        if(this.res.is_presente == true){
           count++;
        }else{ 
            count--;
        }
   ];

I don't know how to do this, i have the idea but i don't know how to execute this.... Thanks in advance!

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda