Here is an example of a JSON response: [[61,57,34],[1,1,3]]. I would like to use the first array for labels and the second array for data.
If I manually set labels and data inside the app, it works fine.
For example:
labels: ["q", "w", "e"]
data: [1, 5, 10]
Vue.component('chart', {
props: ['labels', 'data', 'type'],
template: `
<canvas style="width: 512px; height: 256px"></canvas>
`,
mounted: function () {
new Chart(this.$el, {
type: this.type,
data: {
labels: this.labels,
datasets: [{
label: '# of Votes',
data: this.data,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
})
}
});
new Vue({
el: '#app',
data: {
message: "test",
labels: [],
data: []
},
methods: {
fetchData: function() {
this.$http.get('/admin/fetch_data').then(res => {
this.labels = res.body[0];
this.data = res.body[1];
})
}
},
beforeMount() {
this.fetchData()
}
});
Component on the page:
<div id="app">
{{message}}
<chart :labels="labels" :data="data" type="bar"></chart>
</div>
The data seems to be loaded, but there are no chart bars displayed on the page.