3

I am using Chartjs for my project. Different versions I am using are: ChartJS 2.9.3, Chartjs-plugin-streaming 1.8.0, moment.js 2.24.0,chartjs-adapter-moment 0.1.1. I plotting a realtime chart and I get this warning every second which is filling memory very fast.

time scale: "time.format" is deprecated. Please use "time.parser" instead

My code is:

    private chartPlotting() {
    this.Linecap.push(new Chart('canvas', {
        type: 'line',
        data: {
            datasets: [{
                label: 'Flow',
                lineTension: 0,
                data: [],
                borderColor: '#3cb371',
                fill: false
            },
            {
                label: 'Height',
                lineTension: 0,
                data: [],
                borderColor: '#FF0000',
                fill: false
            }
            ]
        },
        options: {
            responsive: true,
            scales: {
                xAxes: [{
                    type: 'realtime',
                    time: {
                        parser: 'false'
                    },
                    display: true
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true,
                        maxTicksLimit: 10,
                        stepSize: 5,
                        max: 500
                    }
                }],
            },
            plugins: {
                streaming: {
                    duration: 300000,
                    refresh: 1000,
                    delay: 2000,
                    pause: false,
                    ttl: undefined,
                    frameRate: 48,

                    onRefresh: function (Linecap) {
                        ///var data = []
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', url);
                        xhr.onload = function () {
                            var data = JSON.parse(xhr.responseText);
                            Linecap.data.datasets[0].data.push({
                                x: Date.now(),
                                y: data[0]["yrData"]
                            });
                            Linecap.data.datasets[1].data.push({
                                x: Date.now(),
                                y: data[0]["Height"]
                            });
                        };
                    }
                }
            }
        }
    }));
}

I tried to find out reason for this and came to know that may be in next version of chartJS i.e. 3.0.0 this problem will be removed. Is there any work around for getting rid of this error in 2.9.3?

JoSSte
  • 2,953
  • 6
  • 34
  • 54
braveYug
  • 43
  • 7

3 Answers3

2

The problem is due to incompatible versions of the different libraries you're using.

The documentation of chartjs-plugin-streaming for example states the following:

Version 1.8 requires Chart.js 2.7.x or 2.8.x.

To get rid of the problem, you have two options.

  1. get rid of chartjs-plugin-streaming
  2. downgrade Chart.js 2.9.3 to 2.8.0

UPDATE

With Angular 8, I recommend using ng2-charts, which is based on Chart.js. Further you should get rid of chartjs-plugin-streaming and implement related functionality by your own.

Please have a look at the following StackBlitz

uminder
  • 23,831
  • 5
  • 37
  • 72
0

6 months later it's still an open pull request on their repo. You can see the discussion and the long-pending fix here.

If you don't want to downgrade or change libraries you can either use the fix locally yourself, or use one of the npm packages uploaded by contributors who got tired of waiting. I'm using @taeuk-gang/chartjs-plugin-streaming.

rleroux
  • 51
  • 3
0

This issue was fixed in chartjs-plugin-streaming 1.9.0. Also, Chart.js 3.x is supported in the latest version 2.0.0-beta.3.

nagix
  • 536
  • 4
  • 9