Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

170
Views
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!

7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.