It's been well over a decade since I last dabbled in JavaScript, so here I am again. My goal is to create a dynamic graph that updates in real time using data from either my backend database or my ESP32 micro-controller. While it's easy to generate a static HTML/CSS/JavaScript graph, I'm facing a challenge in updating it with real-time data every second. I've managed to make JavaScript calls to the database via XMLHttpRequest and receive the data, but I'm stuck on how to update the graph using this data.
I've found charts that fit my project requirements on .
// Using the chart.setTimeout method as the timeout will be disposed together with a chart
chart.setTimeout(randomValue, 1000);
function randomValue() {
//hand.showValue(Math.random() * 1000, 1000, am4core.ease.cubicOut); // <----- sample code supplied
//hand.showValue(550); // <---- my test code which works
// After some searching, I found this...
function reqListener () {
console.log(this.responseText);
// When un-commented, I can see the integer value that the database returns every second.
//alert(oReq.responseText); // <---- when un-commented I can see my data that the database is returning every second, just an integer value and nothing else.
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", 'http://myurl.com');
oReq.send();
hand.showValue(oReq.responseText); <<<<<< what do I put in the () to show the same data that the alert above displays correctly?
chart.setTimeout(randomValue, 1000); // < original supplied sample code
}
Unfortunately, nothing seems to happen, and I'm quite lost at this point :)