Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

381
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda