I am trying to show the all the companies in the Chart in Dashboard.vue regarding years but it does not show anything and I am trying since many days if someone could help me it will be so kind of him.
My API/Route is :
Route::apiResources(['company'=>'API\CompanyController']);
EmployeeController code is :
public function index(){return Employee::all();}
Code in Chart.vue is:
<script>
import { Line } from "vue-chartjs";
export default {
extends: Line,
data() {
return {
url: "api/company",
years: [],
labels: [],
data: ""
};
},
methods: {
getProducts() {
axios.get(this.url).then(response => {
this.data = response.data;
if (this.data) {
this.data.forEach(element => {
this.years.push(element.created_at);
this.labels.push(element.name);
});
this.renderChart(
{
labels: this.years,
datasets: [
{
label: "list of Companies ",
backgroundColor: "#f87979",
data: this.name
}
]
},
{ responsive: true, maintainAspectRatio: false }
);
} else {
console.log("NO DATA");
}
});
}
},
mounted() {
this.getProducts();
}
};
</script>
Code in app.js is :
Vue.component('chart-component', require('./components/Chart.vue'));
code in Dashboard is :
<template>
<div class="container">
<chart-component></chart-component>
</div>
</template>