Trying to generate a chart with a time axis in Vue using Chart.js has been a challenge. Initially, everything worked perfectly when the data was set directly in the Data object as shown below:
chartData: {
datasets: [
{
backgroundColor: '#ED645A',
borderColor: '#ED645A',
fill: false,
data: [
{
t: new Date("1998-1-1"),
y: 7.1
},
{
t: new Date("1998-2-1"),
y: 8.4
},
{
t: new Date("1998-3-1"),
y: 18.5
},
{
t: new Date("1998-4-1"),
y: 16.2
},
{
t: new Date("1998-5-1"),
y: 18.4
}
]
}
]
},
However, attempting to load the data from a JSON file and formulating the datasets object in a computed property like this, resulted in failure:
import pureSecondDatasetJson from "../assets/pureSecondDataset.json"
...
export default {
...
data () {
return {
pureSecondDataset: pureSecondDatasetJson,
charts: [
chartData: {
datasets: this.foo
},
...
computed: {
foo() {
var plotData = []
for (var i=0; i<this.pureSecondDataset.length; i++) {
plotData.push({t: new Date(this.pureSecondDataset[i].t), y: this.pureSecondDataset[i].y})
}
var chartData = [
{
backgroundColor: '#ED645A',
borderColor: '#ED645A',
fill: false,
data: plotData
}
];
return chartData
}
}
The object created in the computed property seems identical to the one added directly. So, why doesn't it work?