I'm in the process of creating an object that corresponds to chartJS's line-chart model
<line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"></line-chart>
There is an API I utilize which returns a standard array of objects that I adjusted as follows:
getData: function() {
MyService.getData().then(res => {
this.data = res.reduce((obj, item) => {
obj[item.date] = item.value;
return obj;
}, {});
console.log(this.data);
});
}
The API output is properly formatted but Chrome shows it like this
{
2018-03-05: (...),
2018-03-06: (...),
2018-03-07: (...)
}
Initially thought this formatting was causing the issue with the chart not displaying, but turned out not to be.
Below is the complete HTML
<div class="data" v-if="data.length > 0">
<line-chart :data="data"></line-chart>
</div>
Including the component's data()
export default {
name: 'Graphs',
data() {
return {
listOfStuff: [],
selectedStuff: "",
data: {}
}
}