MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

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

    Troubleshooting
    2
    4
    232
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      doridol last edited by

      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?

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @doridol last edited by 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

        Sam

        Create a working config
        How to add modules

        D 1 Reply Last reply Reply Quote 0
        • D
          doridol @sdetweil last edited by

          @sdetweil how can I update my chart without flashig?

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @doridol last edited by

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

            Sam

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy