How can I update my chart?

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…