How can I update my chart?

[sdetweil]

@doridol stop on the push, and mouse over ‘this’

check each part of your data path

[doridol]

@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]

@doridol try

change

socketNotificationReceived: function (notification, payload) {

to this

socketNotificationReceived:  (notification, payload) => {

the arrow function should retain the context of ‘this’.

[doridol]

@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]

@doridol the 1st time thru the chart doesn’t exist yet, right?

                // gets the data for chart
                this.textDataRecived = payload;
                this.loaded = true;
            }
            // chart may NOT be drawn yet 
           // getDom has not been called yet since data arrived
           if(this.myChart !==  undefined )
               console.log(this.myChart)

[doridol]

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

[doridol]

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

[sdetweil]

@doridol did u get an update for the chart? (another socketnotification?)

also, where do u define myChart?

should be after defaults

myChart: null,

[doridol]

@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]

@doridol that is USE, not really define

I don’t like side effects… create on 1st use… ugh.

also, you will UPDATE in notification, but need to CREATE in getdom, or somewhere

[doridol]

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

[doridol]

@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]

@doridol i do not know anything about the chart.update() method… I don’t use it.

[doridol]

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

[sdetweil]

@doridol i use destroy() and then build another

[doridol]

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