I am currently working on a VueJS code to display a bar-chart:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
data: function () {
return {
datacollection: {
labels: ['MICROFINANZAS -SECTOR COMERCIO','MICROFINANZAS -SECTOR SERVICIOS'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: '#249EBF',
data: [15000, 71700]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
legend: {
display: false
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
return '$' + tooltipItems.yLabel;
}
}
},
responsive: true,
maintainAspectRatio: false,
height: 200
}
}
},
mounted() {
// this.chartData is created in the mixin
this.renderChart(this.datacollection, this.options)
}
})
Method in VueJS
var app = new Vue({
el: '#grid',
data: {
columns: ['id', 'nombre'],
objeto: "",
searchQuery: "",
dataChart: "",
dataChart1: "",
},
created: function () {
this.getDeudas();
},
methods: {
getDeudas: function () {
this.$http.get(baseURL + "/Home/ConsultarDeudasHome").then(function (response) {
this.lista = response.data.data;
console.log(this.lista);
this.objeto = JSON.parse(this.lista);
console.log(this.objeto[1].original);
this.dataChart = [this.objeto[0].original, this.objeto[0].actual];
console.log(this.dataChart);
this.dataChart1 = [this.objeto[1].original, this.objeto[1].actual];
});
},
},
This code show this bar chart: https://i.sstatic.net/hyh4S.png
However, I now need to dynamically replace two variables in my code:
labels: ['MICROFINANZAS -SECTOR COMERCIO','MICROFINANZAS -SECTOR SERVICIOS'],
data: [15000, 71700]
I intend to achieve this by using the information from the method getDeudas()
Can anyone guide me on how to implement this?