[Angular]How do I control the refresh timing with input binding other than with the numeric value about chartjs-plugin-streaming HOT 8 CLOSED

A timestamp (for example, Date.now()) must be set to x property even if you don't need to show the x-axis labels. To hide the x-axis labels, use the following code:

  options: {
    scales: {
      xAxes: [{
        type: 'realtime',
        display: false
      }]
    },
    ...
  }

from chartjs-plugin-streaming.

If you are using strict type checking, run npm install @types/chart.js and use the following code:

import {Chart, ChartDataSets, ChartPoint} from 'chart.js';
import 'chartjs-plugin-streaming';

...

if (this.chartObj.data && this.chartObj.data.datasets) {
  this.chartObj.data.datasets.forEach(function(dataset: ChartDataSets, i: number) {
    (dataset.data as ChartPoint[]).push({
      x: Date.now(),
      y: data[i]
    });
  });
}
this.chartObj.update({
  duration: 0
});

from chartjs-plugin-streaming.

You need to add new data to datasets[index].data, not to datasets. Try this code for chart definition:

this.chartObj = new Chart(this.el.nativeElement.getContext('2d'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: color(newColor).alpha(0.5).rgbString(),
      borderColor: newColor,
      fill: false,
      lineTension: 0,
      data: []
    }]
  },
  options: {
    plugins: {
      streaming: {
        duration: 1000
      }
    }
  }
});

Then, this for chart update (assuming yourData object has timestamp and value array on every update):

this.chartObj.config.data.datasets.forEach(function(dataset, i) {
  dataset.data.push({
    x: yourData.timestamp,
    y: yourData.value[i]
  });
});
this.chartObj.update({
  duration: 0
});

from chartjs-plugin-streaming.

I'm afraid it doesn't work. The data I'm trying to show is number array(e.g. [1,2,3]) so I tried like,

this.chartObj.config.data.datasets.forEach(function(dataset, i) {
  dataset.data.push({
    y: myData[i]
  });
});
this.chartObj.update({
	duration: 0
});

And the dataset.data.push({y: myData[i]}) gives me a typescript compile error, saying calling the wrong signature.

Edit: I don't need to present x-axis labels so I don't pass any timestamp or something for the x-axis.

from chartjs-plugin-streaming.

this.chartObj.config.data.datasets.forEach(function(dataset, i) {
    dataset.data.push({
    	x: Date.now(),
        y: data[i]
    });
});

I tried like above, and it finally works!
Just one thing. It still gives me the typescript compile error as I mentioned earlier:

Calling the wrong signature

Any thought on this?

from chartjs-plugin-streaming.

What is the exact typescript compile error message? How do you import Chart.js and chartjs-plugin-streaming?

from chartjs-plugin-streaming.

The message is:

It has no compatible call signature.

And I currently import Chart.js and chartjs-plugin-streaming as:

import * as Chart from 'chart.js';
import 'chartjs-plugin-streaming';

from chartjs-plugin-streaming.

The compile error's gone! Thanks!

from chartjs-plugin-streaming.