Read the statement by Michael Teeuw here.
How can I update my chart?
-
@sdetweil
I changed socketNotificationReceived like thissocketNotificationReceived: 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
-
@doridol stop on the push, and mouse over ‘this’
check each part of your data path
-
@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?? -
@doridol try
change
socketNotificationReceived: function (notification, payload) {
to this
socketNotificationReceived: (notification, payload) => {
the arrow function should retain the context of ‘this’.
-
@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 -
@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)
-
@sdetweil aaaaah!! I understood! I’ll try it
-
@sdetweil I tried it but nothing is printed in develop console window :anxious_face_with_sweat:
-
@doridol did u get an update for the chart? (another socketnotification?)
also, where do u define myChart?
should be after defaults
myChart: null,
-
@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