Chartjs plugin streaming in angular7 doesnt work

[DianPermana]

Hello sir, I am dian from indonesia, i have tried for chart.js plugin streaming in angular 7, but when I run this plugin (https://nagix.github.io/chartjs-plugin-streaming/ ) doesnt work (not display graph). And then, I have tried chart.js in angulat 7 from "https://valor-software.com/ng2-charts/" it's work. where is the problem, i dont understand. Please can you review this problem.

[nagix]

I have confirmed the plugin works with ng2-charts in Angular 7. Click the 'Angular 2+' tab in the tutorial page and follow the instructions.

[adripanico]

I've used it with Angular 6 and I've recently updated to Angular 7 without any issue.

[johndacost]

Hi, almost the same problem... I follow this sample.

but onRefresh: function (chart) {...} is never call

  public options: any = {
    scales: {
      xAxes: [{
        type: 'time',
        realtime: {
          duration: 20000,    // data in the past 20000 ms will be displayed
          refresh: 1000,      // onRefresh callback will be called every 1000 ms
          delay: 1000,        // delay of 1000 ms, so upcoming values are known before plotting a line
          pause: false,       // chart is not paused
          ttl: undefined,
          // a callback to update datasets
          onRefresh: function (chart: any) {
            debugger;
            // query your data source and get the array of {x: timestamp, y: value} objects
            var data = [Math.random()];
            // append the new data array to the existing chart data
            Array.prototype.push.apply(chart.data.datasets[0].data, data);
          }
        }
      }]
    },
    plugins: {
      streaming: {            // per-chart option
        frameRate: 30       // chart is drawn 30 times every second
      }
    }

[nagix]

@johndacost Do you see any error messages in console?

[adripanico]

Hi, almost the same problem... I follow this sample.

but onRefresh: function (chart) {...} is never call

  public options: any = {
    scales: {
      xAxes: [{
        type: 'time',
        realtime: {
          duration: 20000,    // data in the past 20000 ms will be displayed
          refresh: 1000,      // onRefresh callback will be called every 1000 ms
          delay: 1000,        // delay of 1000 ms, so upcoming values are known before plotting a line
          pause: false,       // chart is not paused
          ttl: undefined,
          // a callback to update datasets
          onRefresh: function (chart: any) {
            debugger;
            // query your data source and get the array of {x: timestamp, y: value} objects
            var data = [Math.random()];
            // append the new data array to the existing chart data
            Array.prototype.push.apply(chart.data.datasets[0].data, data);
          }
        }
      }]
    },
    plugins: {
      streaming: {            // per-chart option
        frameRate: 30       // chart is drawn 30 times every second
      }
    }

I am not using it this way. I have no realtime property. Try this:

public options: any = {
  scales: {
    xAxes: [{
      type: 'realtime',
    }]
  },
  plugins: {
    streaming: {
      frameRate: 30,
      duration: 20000,
      refresh: 1000,
      delay: 1000,
      onRefresh: (chart: any) => {
        ...
      }
    }
  }
}

[johndacost]

@johndacost Do you see any error messages in console?

Nope... no error catched.. Congifuration

• Angular6
• ionic4

live.page.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ChartsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LivePage]
})

export class LivePageModule { }

live.page.html

    <div style="display: block">
      <canvas baseChart [chartType]="'line'" [datasets]="datasets" [options]="options">
      </canvas>
    </div>

live.page.ts

  ...
  import 'chartjs-plugin-streaming';
  ...
  datasets: any[] = [{ data: [] }, { data: [] }];
  options: any = {
    scales: {
      xAxes: [{ type: 'realtime' }]
    },
    plugins: {
      streaming: {
        frameRate: 30,
        duration: 20000,
        refresh: 1000,
        delay: 1000,
        onRefresh: function (chart: any) {
          console.log("test");
          chart.data.datasets.forEach(function (dataset: any) {
            dataset.data.push({
              x: Date.now(),
              y: Math.random()
            });
          });
        },
      }
    }
  };

Package.json

"@types/chart.js": "^2.7.42",
"angular-chart.js": "^1.1.1",
"chart.js": "^2.7.3",
"chartjs-plugin-streaming": "^1.7.1",
"moment": "^2.24.0",
"ng2-charts": "^1.6.0",

Result

[johndacost]

Hi, almost the same problem... I follow this sample. but onRefresh: function (chart) {...} is never call

  public options: any = {
    scales: {
      xAxes: [{
        type: 'time',
        realtime: {
          duration: 20000,    // data in the past 20000 ms will be displayed
          refresh: 1000,      // onRefresh callback will be called every 1000 ms
          delay: 1000,        // delay of 1000 ms, so upcoming values are known before plotting a line
          pause: false,       // chart is not paused
          ttl: undefined,
          // a callback to update datasets
          onRefresh: function (chart: any) {
            debugger;
            // query your data source and get the array of {x: timestamp, y: value} objects
            var data = [Math.random()];
            // append the new data array to the existing chart data
            Array.prototype.push.apply(chart.data.datasets[0].data, data);
          }
        }
      }]
    },
    plugins: {
      streaming: {            // per-chart option
        frameRate: 30       // chart is drawn 30 times every second
      }
    }

I am not using it this way. I have no realtime property. Try this:

public options: any = {
  scales: {
    xAxes: [{
      type: 'realtime',
    }]
  },
  plugins: {
    streaming: {
      frameRate: 30,
      duration: 20000,
      refresh: 1000,
      delay: 1000,
      onRefresh: (chart: any) => {
        ...
      }
    }
  }
}

I try your solution but still not refresh the graph :(

[adripanico]

But is it calling to onRefresh method?

[johndacost]

But is it calling to onRefresh method?

EDIT Yes it's working with your solution !

[nagix]

Closing as a solution was suggested.