0
I’m not getting popular my chart with data vintos of an api, can help me, I don’t know what I’m doing wrong!
<template>
<div class="py-1 bg-light px-5">
<div class="col-12 my-2">
<div class="card shadow-none border-0">
<div class="card-body">
<p>Site Traffic Overview</p>
<div id="content">
<canvas ref="chart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
import Chart from 'chart.js';
import ChartJs from '../../domain/Chart';
import ChartService from '../../services/Chart';
export default {
data () {
return {
dados: [],
month: [],
views: [],
dado: {month: '', views: ''}
}
},
mounted(dados){
listar: () => {
return http.get('apioculta')
}
ChartService.listar()
.then(resposta => {
dados = resposta.data;
console.log(dados)
})
.catch(error => {
console.log(error)
})
var chart = this.$refs.chart;
var ctx = chart.getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: this.dados.month,
datasets: [{
label: 'Traffic',
data: this.dados.views,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
maintainAspectRation: true
}
});
}
}
</script>
the console.log(data) output is printing correctly? I believe you should use this.data = answer.data
– Guto
Yes, it is, in the console, I have all the data shown, and the graph gets to be mounted, but it does not load the Abels and datasets | date, it seems to be a matter of loading order that I am not knowing how to solve! If you can help, thank you!
– Priscila Neu