How can I update chartjs getdom with fade in/ fade out

[doridol]

My chart updated instantly disappear and show when I use updateDom.
I’ve already used updateDon(self.config.animationSpeed) but it seems anything change

MMM-Chart.js code

Module.register("MMM-Chart", {
        defaults: {
            updateInterval: 2000,

        },
            
        getScripts: function () {
            return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.min.js"];  // use right file name
        },
    
        start: function () {
            // Log.info("Starting module: " + this.name);
            // requiresVersion: "2.1.0";
            // this.loaded = false;
            this.scheduleUpdate();
            // this.config = Object.assign({}, this.defaults, this.config);
            // Log.info("Starting module: " + this.name);
    
        },

        scheduleUpdate: function () {
            setInterval(() => {
                this.getData();
            }, 
            this.config.updateInterval);
            this.getData();
        },

        getData: function() {
            console.log('GET_TEXT_DATA', this.config)
            this.sendSocketNotification('GET_TEXT_DATA', this.config);
        },
    
        socketNotificationReceived: function (notification, payload) {
            if (notification === "TEXT_RESULT") {
                this.textDataRecived = payload;
                this.loaded = true;
            } 
            this.updateDom(this.config.animationSpeed);
        },
    
        getDom: function () {
            
            const wrapper = document.createElement("div");
            
            this.ctx = document.createElement("canvas");
            this.ctx.style.width = "700px";
            this.ctx.style.height = '700px';
            
            wrapper.appendChild(this.ctx)
            
            labels = [2,4,6,8,10,12,14,16,18,20,22,00]
            
            this.myChart = new Chart(this.ctx, {

                type: 'line',
                data: {
                    labels: labels,
                    
                    datasets: [{
                        
                        data: this.textDataRecived,

                        backgroundColor: 'rgba(255,255,255,0.3)',
                        borderColor: 'white',
                        
                        borderWidth: 2,
                        
                        fill: true,
                        
                    }]
                },

                options: {

                    title: {
                            display: true,
                            text: 'Air-Quality',
                    },

                    scales: {

                        xAxes: [{

                            // type: "time" ,

                            // time: {
                            //     unit: "hour",
                            // },

                            gridLines: {
                                color: 'rgba(255,255,255,0.2)',
                            },
        
                        }],


                    },
                }
            });
    
            return wrapper;
        }
    });

node_helper.js code

const spawn = require('child_process').spawn;
const NodeHelper = require("node_helper");

var self;

module.exports = NodeHelper.create({

    start: function () {
        self = this;
        console.log("Starting node_helper for: " + this.name);
    },

    getData: function () {

        const result = spawn('python', ['/home/pi/MagicMirror/modules/MMM-Chart/Dust_Db.py']);

        result.stdout.on('data', function(data) {
            recivedData = data.toString();
            recivedData = recivedData.split(/[^0-9]/g)

            for (var i in recivedData) {
                if (recivedData[i] == '') {
                    recivedData.splice(i, 1)
                }
            }
            console.log(recivedData)
            self.sendSocketNotification('TEXT_RESULT', recivedData);
        });
		  
		  process.on('exit', function() {
			if (x) {
			  x.kill();
			}
		  });
    },

    socketNotificationReceived: function (notification, payload) {

        if (notification === 'GET_TEXT_DATA') {
            self.getData();
        }
    },
});

and my config.js

                {
			module: "MMM-Chart",
			position: "bottom_center",
			animationSpeed: 3000,
		},

What should I do to update my chart with fade in and fade out animation?

[sdetweil]

@doridol you will have to use css to get fading. and u will want to carefully manage the canvas the chart is in. don’t recreate is in every getDom, else the chart will flash

the time delay in updateDom() is to control how fast it changes, not provide animation

[doridol]

@sdetweil how can I update my chart without flashig?

[sdetweil]

@doridol create the div and canvas only once, and reuse it.