@sdetweil I finally update my chart with this.myChart.update()!!! it is all for your help now I can get sleep…

@sdetweil okay thanks for you a lot of help:beaming_face_with_smiling_eyes:

@sdetweil I have really really last question I changed my socketNotificationReceived like this

socketNotificationReceived: function(notification, payload) {
            if (notification === "TEXT_RESULT") {
                this.textDataRecived = payload;
                this.loaded = true;
            }

            
            if(count < 2)
            {
                this.updateDom();
                count = count + 1;
            }
            else
            {
                this.myChart.data.datasets.data = this.textDataRecived
                console.log(this.myChart.data.datasets.data)
                this.myChart.update();
            }
        },

and console.log(this.myChart.data.datasets.data) successfully print this.textDataRecived but my chart is not updated in the screen why???

@sdetweil oh… it is very difficult to update chart… really thanks for your help I seem I have to study more…

@sdetweil I define myChart in getDom like this

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]
            
            this.myChart = new Chart(this.ctx, {

                type: 'line',
                data: {
                    labels: labels,
                    
                    datasets: [{
                        
                        data: [1,2,3,4],

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

                options: {

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

                    scales: {

                        xAxes: [{

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

and I’ll only update myChart in socketNotificationReceived

@sdetweil I tried it but nothing is printed in develop console window :anxious_face_with_sweat:

@sdetweil aaaaah!! I understood! I’ll try it

@sdetweil I changed my socketNotificationReceived like this

socketNotificationReceived: (notification, payload) => {
            if (notification === "TEXT_RESULT") {
                this.textDataRecived = payload;
                this.loaded = true;
            }
            
            console.log(this.myChart)
            // this.myChart.data.datasets.data = this.textDataRecived
            // this.updateDom(60000);
        },

I add console.log(this.myChart) to check it point this.myChart in getDom but it print undefined… what did I do wrong??
Really thanks for your so many helps

@sdetweil I’m so sorry that I asked same question twice although you answered my questions.
I found that this.myChart in socketNotificationReceived doens’t pointing the this.myChart in getDom how can I point this.myChart in socketNotificationReceived exactly to this.myChart in getDom??

@sdetweil
I changed socketNotificationReceived like this

socketNotificationReceived: function (notification, payload) {
            if (notification === "TEXT_RESULT") {
                this.textDataRecived = payload;
                this.loaded = true;
            }
            
            this.myChart.data.datasets.data.push(this.textDataRecived)
            this.myChart.update();
            // this.updateDom(60000);
        },

And I got error like these

@sdetweil
Yes Yes it seems like other people use it. I’ve also tried to change my chart data with this.myChart.data.datasets.data.push(textDataRecived) in socketNotificationReceived but it doesn’t work…

How can I update myChart data in the socketNotificationReceived function?

I want to update my chart without getDom(), other people use Mychart.update() How can I use it?? please help korean noob…

My module code

Module.register("MMM-Chart", {
        defaults: {
            updateInterval: 3000,
        },
            
        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() {
            this.sendSocketNotification('GET_TEXT_DATA', this.config);
        },
    
        socketNotificationReceived: function (notification, payload) {
            if (notification === "TEXT_RESULT") {
                this.textDataRecived = payload;
                this.loaded = true;
            }
            this.myChart.data.datasets.push([{
                        
                data: this.textDataRecived,

                backgroundColor: 'rgba(255,255,255,0.3)',
                borderColor: 'white',
                
                borderWidth: 2,
                
                fill: true,
                
            }]);
            
            
        },
    
        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]
            
            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: [{

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

My node_helper.js code

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

var self;
i = 1;
a = 1;
b = 1;
c = 1;

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();
        // }
        // });
        
        recivedData = [i, a, b, c];
        self.sendSocketNotification('TEXT_RESULT', recivedData);
        console.log(recivedData)
        i = i + 1
        a = a + 3
        b = b + 7
        c = c + 2

    },

    socketNotificationReceived: function (notification, payload) {

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

@sdetweil how can I update my chart without flashig?

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 Really really thanks!! I solved problem

node_helper.js

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-DustInfo/Naver_geo.py']);

		result.stdout.on('data', function(data) {
			console.log(data.toString());
			recivedData = data.toString();
			recivedData = JSON.parse(recivedData);
		  });
		  
		  result.on('close', (code) => {
			console.log(recivedData.station);

			station = recivedData.station;
			pm10 = recivedData.pm10;

			var recivedData = {
                station,
                pm10
            }

			self.sendSocketNotification('TEXT_RESULT', recivedData);

			
		  });
		  process.on('exit', function() {
			if (x) {
			  x.kill();
			}
		  });
    },

    socketNotificationReceived: function (notification, payload) {

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

my python file code

import requests

import pandas as pd

import json

import urllib.request

from bs4 import BeautifulSoup

from haversine import haversine



station_data = pd.read_excel("/home/pi/Desktop/Dust/station_list.xlsx")

location_data = pd.read_excel("/home/pi/Desktop/Dust/location.xlsx")

location_data = location_data.values.tolist()



def search_map(search_text):

    client_id = 'vo9k89s848' #클라이언트 ID값

    client_secret = 'MPooQfaCMH9eSMnT50RvNEYjChshVRHwq3qiBoQi' #클라이언트 Secret값

    encText = urllib.parse.quote(search_text) 

    url = 'https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query='+encText

    request = urllib.request.Request(url)

    request.add_header('X-NCP-APIGW-API-KEY-ID', client_id)

    request.add_header('X-NCP-APIGW-API-KEY', client_secret)

    response = urllib.request.urlopen(request)

    rescode = response.getcode()

    if(rescode==200):

        response_body = response.read()

        return response_body.decode('utf-8')



def station_info():

    station_info = []

    for i in range(489):

        info = search_map(station_data.loc[i]['측정소 주소'])

        info = json.loads(info)

        station_info.append([float(info['addresses'][0]['y']),float(info['addresses'][0]['x'])])

    return station_info



def curr_LocInfo():

    curr_LocInfo = []

    info = search_map("서울특별시 노원구 공릉로 232")

    info = json.loads(info)

    curr_LocInfo.append([float(info['addresses'][0]['y']),float(info['addresses'][0]['x'])])

    return curr_LocInfo



def Loc_to_xlsx():

    station_x = station_info()

    station_x = pd.DataFrame(station_x)

    station_x.to_excel("C:/Users/sks12/Desktop/PythonWorkspace/Dust_Window/location.xlsx")



def search_station():

    station_Loc = location_data

    curr_Loc = curr_LocInfo()

    

    min = 10000

    for i in range(489):

        distance = haversine((station_Loc[i][1], station_Loc[i][2]), curr_Loc[0], unit = 'km')

        if distance < min:

            min = distance

            globals()['station_index'] = i



def Dust_info():

    search_station()

    city = station_data.loc[station_index]['측정소명']

    key = "mr81qR0Ed0RG4%2FUFpmXXLO0c7AO3HI6PC%2BVFgy%2BMO1yZ%2F7ciBAJejaPZ%2FmHi%2F30D4CYg7DKkGwpxHXTgHQDTSQ%3D%3D"

    url = "http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty?stationName={}&dataTerm=month&pageNo=1&numOfRows=100&returnType=xml&serviceKey={}".format(city, key)

    res = requests.get(url)

    res.raise_for_status()

    content = BeautifulSoup(res.text, "lxml")



    dust = content.item

    pm10 = dust.pm10value

    check = pm10.get_text()



    if check == '-':

        dust = dust.next_sibling

        dust = dust.next_sibling



    pm10 = dust.pm10value

    pm10 = int(pm10.get_text())

    # print("near station: {}".format(station_data.loc[station_index]['측정소명']))

    # print("dust info:{}".format(pm10))



    data = {

        "station" : station_data.loc[station_index]['측정소명'],

        "pm10" : pm10

        }

    data_json = json.dumps(data)

    print (data_json)



Dust_info()

my module code

Module.register("MMM-DustInfo", {
	defaults: {
		updateInterval: 60000,

	},

	requiresVersion: "2.1.0", // Required version of MagicMirror

	start: function () {
        // Log.info("Starting module: " + this.name);
        // requiresVersion: "2.1.0";
        // this.loaded = false;
        this.scheduleUpdate();

    },

    getStyles: function() {
        return["MMM-DustInfo.css"];
    },

	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();
	},


	getDom: function () {
        var wrapper = document.createElement("div");

        if (!this.loaded) {
            wrapper.innerHTML = "LOADING";
            return wrapper;
        }
        if (this.loaded) {

            var table = document.createElement('td');

            var space1 = document.createElement('tr');
            var space2 = document.createElement('tr');
            
            var pm10Icon = document.createElement("tr");
            if (this.textDataRecived.pm10 <= 30) {
                Icon_pm10 = "fa fa-smile-o";
                pm10Icon.id = 'smile'
            }
            else if (this.textDataRecived.pm10 > 30 && this.textDataRecived.pm10 <= 80) {
                Icon_pm10 = "fa fa-meh-o"
                pm10Icon.id = 'meh'
            }
            else {
                Icon_pm10 = "fa fa-frown-o"
                pm10Icon.id = 'frown'
            }
            pm10Icon.className = Icon_pm10;
            var pm10Data = document.createElement('span');
            pm10Data.className = "medium";
            pm10Data.innerHTML = "PM10: " + this.textDataRecived.pm10 +" ppm";

            var stationIcon = document.createElement("tr");
            stationIcon.className = "fa fa-home";
            var stationData = document.createElement("span");
            stationData.className = "medium";
            stationData.innerHTML = "내 위치: " + this.textDataRecived.station;


            table.appendChild(space1);
            table.appendChild(space2);

            space1.appendChild(pm10Icon);
            pm10Icon.appendChild(pm10Data);
            
            space2.appendChild(stationIcon);
            stationIcon.appendChild(stationData);
            
            wrapper.appendChild(table);
        }
        return wrapper;
    },
	
});

and i got a error like this

[01.07.2021 23:12.25.107] [LOG]   {"station": "\ub178\uc6d0\uad6c", "pm10": 31}

[01.07.2021 23:12.25.342] [ERROR] Whoops! There was an uncaught exception...
[01.07.2021 23:12.25.345] [ERROR] TypeError: Cannot read property 'station' of undefined
    at ChildProcess.<anonymous> (/home/pi/MagicMirror/modules/MMM-DustInfo/node_helper.js:23:28)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1021:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)

I want to display pm10 value and nearest dustinfo station using airkorea API

I’m really beginner please help me…