score:0

Accepted answer

you shouldn't try access a computed property from your data as explained on the vue forum.

the data is evaluated before the computed array

i would advise changing your computed property to something like below and then use that as your chart data:

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})

    return {
        chartdata: {
            datasets:[{
                backgroundcolor: '#ed645a',
                bordercolor: '#ed645a',
                fill: false,
                data: plotdata
            }]
        }
    }
}

i've added a fiddle to show how you can do this by not using the computed property in data. while i was making the fiddle i found that for a proper line graph you need to have a labels property for the x-values otherwise you can use type: scatter and drawline:true to specify the x and y values together. chart.js - plot line graph with x , y coordinates

new vue({
  el: "#app",
  data: () => {
    return {
      plotdata: [{
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 2
      }, {
        x: 3,
        y: 3
      }]
    }
  },
  computed: {
    foo() {
      return {
        type: 'scatter',
        data: {
          datasets: [{
            showline: true,
            label: 'my first dataset',
            backgroundcolor: 'rgb(255, 99, 132)',
            bordercolor: 'rgb(255, 99, 132)',
            data: this.plotdata
          }]
        }
      }
    }
  },
  mounted() {
    var ctx = document.getelementbyid('chart').getcontext('2d');
    new chart(ctx, this.foo);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div id="app">
  <canvas id="chart" width="400" height="400"></canvas>
</div>


Related Query

More Query from same tag