<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[How can I update chartjs getdom with fade in&#x2F; fade out]]></title><description><![CDATA[<p dir="auto">My chart updated instantly disappear and show when I use updateDom.<br />
I’ve already used updateDon(self.config.animationSpeed) but it seems anything change</p>
<p dir="auto">MMM-Chart.js code</p>
<pre><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(() =&gt; {
                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;
        }
    });
</code></pre>
<p dir="auto">node_helper.js code</p>
<pre><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();
        }
    },
});
</code></pre>
<p dir="auto">and my config.js</p>
<pre><code>                {
			module: "MMM-Chart",
			position: "bottom_center",
			animationSpeed: 3000,
		},
</code></pre>
<p dir="auto">What should I do to update my chart with fade in and fade out animation?</p>
]]></description><link>https://forum.magicmirror.builders/topic/15242/how-can-i-update-chartjs-getdom-with-fade-in-fade-out</link><generator>RSS for Node</generator><lastBuildDate>Sun, 12 Apr 2026 23:00:21 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/15242.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 09 Jul 2021 02:25:02 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to How can I update chartjs getdom with fade in&#x2F; fade out on Mon, 12 Jul 2021 12:29:45 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/doridol" aria-label="Profile: doridol">@<bdi>doridol</bdi></a>  create the div and canvas only once, and reuse it.</p>
]]></description><link>https://forum.magicmirror.builders/post/92748</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/92748</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Mon, 12 Jul 2021 12:29:45 GMT</pubDate></item><item><title><![CDATA[Reply to How can I update chartjs getdom with fade in&#x2F; fade out on Mon, 12 Jul 2021 04:13:39 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a> how can I update my chart without flashig?</p>
]]></description><link>https://forum.magicmirror.builders/post/92742</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/92742</guid><dc:creator><![CDATA[doridol]]></dc:creator><pubDate>Mon, 12 Jul 2021 04:13:39 GMT</pubDate></item><item><title><![CDATA[Reply to How can I update chartjs getdom with fade in&#x2F; fade out on Sat, 10 Jul 2021 12:25:53 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/doridol" aria-label="Profile: doridol">@<bdi>doridol</bdi></a> 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</p>
<p dir="auto">the time delay in updateDom() is to control how fast it changes, not provide animation</p>
]]></description><link>https://forum.magicmirror.builders/post/92667</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/92667</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Sat, 10 Jul 2021 12:25:53 GMT</pubDate></item></channel></rss>