How can I update my chart?

[doridol]

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

[sdetweil]

@doridol said in How can I update my chart?:

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

it should work. you might need to check if ‘this’ is pointing to your module data. use the developers window sources view and put a stop on the notification routine

[doridol]

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

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