title: (Angular Ionic) How can I stream my custom data with chartjs-plugin-streaming?
body: <p>I am trying to stream data into canvas with chart.js and chartjs-plugin-streaming.
  It works perfectly using random data. But how can I stream my custom data ?</p>
  <p>Streaming random data works well(updating every 2 seconds).</p>
  <p><a href="https://i.stack.imgur.com/es4n0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/es4n0.jpg" alt="enter image description here" /></a></p>
  <p>tab1.page.html</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;div&gt;
  
      &lt;canvas
        baseChart
        [chartType]=&quot;'line'&quot;
        [datasets]=&quot;datasets&quot;
        [options]=&quot;options&quot;&gt;  
      &lt;/canvas&gt;
  
    &lt;/div&gt;
  </code></pre>
  <p>tab2.page.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import 'chartjs-plugin-streaming';
  
  
  @Component({
    selector: 'app-tab2',
    templateUrl: 'tab2.page.html',
    styleUrls: ['tab2.page.scss']
  })
  export class Tab2Page {
  
  
    datasets: any[] = [{
      data: []
    }, {
      data: []
    }];
  
    options: any = {
      scales: {
        xAxes: [{
          type: 'realtime',
          realtime: {
            onRefresh: function(chart: any) {
              chart.data.datasets.forEach(function(dataset: any) {
  
                dataset.data.push({
                  x: Date.now(),
                  y: Math.random() * 100
                });
              });
            },
            delay: 2000
          }
        }],
        yAxes: [{
          ticks: {
            max:100,
            min:0
          }
        }]
      }
    };
  }
  </code></pre>
  <p>But when I try to stream my data it throws an error saying</p>
  <pre><code>ERROR TypeError: Cannot read property 'myDataFromServer' of undefined
  </code></pre>
  <p>This is custom my code that needs your kind reviews.</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import 'chartjs-plugin-streaming';
  
  @Component({
    selector: 'app-tab2',
    templateUrl: 'tab2.page.html',
    styleUrls: ['tab2.page.scss']
  })
  export class Tab2Page {
  
    myDataFromServer:number;
    updateMyDataFromServerFunction:any;
  
  
    datasets: any[] = [{
      data: []
    }, {
      data: []
    }];
  
    options: any = {
      scales: {
        xAxes: [{
          type: 'realtime',
          realtime: {
            onRefresh: function(chart: any) {
              chart.data.datasets.forEach(function(dataset: any) {
  
                dataset.data.push({
                  x: Date.now(),
                  y:this.myDataFromServer
                });
              });
            },
            delay: 2000
          }
        }],
        yAxes: [{
          ticks: {
            max:100,
            min:0
          }
        }]
      }
    };
  
  
    constructor(
    ) {}
  
    ngOnInit(){
      this.updateMyDataFromServer()
    }
  
    updateMyDataFromServer(){
      console.log('updateMyDataFromServer() called');
      
      this.updateMyDataFromServerFunction = setInterval(() =&gt; {
        this.myDataFromServer = Math.random() * 100
      },1000)
  
    }
  }
  </code></pre>