My curve is not displayed while I receive the data

Hello, I am trying to draw a curve with the values I receive in real time, but the curve is not displayed

<script src="canvasjs.min.js"></script>
window.onload = function() {
     var dataPoints = loadXMLDoc()
     var chart = new CanvasJS.Chart("chartContainer", {
                        theme: "light2",
                        title: {
                                 text: "Valeur detension en temps reel"
                                 title: "Time in millisecond"
                                 suffix: " V"
                        data: [{
                                 type: "line",
                                 yValueFormatString: "#,##0.0#",
                                 toolTipContent: "{y} V",
                                 dataPoints: dataPoints

     function loadXMLDoc() {
                 var xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                            var dataPoints = this.responseText;
                            return dataPoints
       "GET", "server.php", true);

     function drawChart(dataPoints) {
     ["dataPoints"] = dataPoints;



<div id="chartContainer" style="height: 370px; width: 100%;">


Just tossing this out there… The function above does not return anything. The function IT contains does return something, but that is in function scope. Examine that function and see if you can get it to return the datapoints to the caller.

ok what should i do then? I think created a slab add the json in this table, does that seem correct to you?

I’m a little confused over this. If we were to inject the response we would assign it to .innerHTML, not return it. Perhaps remove the var and change the calls.

var datapoints;

Inside the function,

datapoints = this.responseText

TBH, this is not something I’ve worked with in recent years so can’t qualify my answers with any certainty. Worth a try, though.