AJAX populate graph XMLHttpRequest

[Dali_Sarb]

Hi, I have a form on my webpage, and once the user fills it and submits the data.
They get back an array of objects from server:
newSal array of objects value:

 [ {
  label : "and",
  y : 100
}, {
  label : "the",
  y : 50
} ]

So how I do populate and update the graph?
I think the problem may be because the canvas function is executed on windows load, while the data is attained when user submits form.

Code so far:

            var httpReq = new XMLHttpRequest();
            var newSal;
            var chart;

            function loadDoc() {
                httpReq.open("GET", "URL/URI", true);
                httpReq .onreadystatechange = processInfo;
                httpReq .send();
            }

            function processInfo() {
                if (httpReq.readyState == 4 && httpReq.status == 200) {
                    document.getElementById("demo").innerHTML = httpReq.responseText;
                }
                newSal = xhttp.responseText;
                chart.render();
            }
            window.onload = function () {
                console.log(newSal);
                chart = new CanvasJS.Chart("chartContainer", {
                    animationEnabled: true,
                    title: {
                        text: "My Graph"
                    },
                    axisX: {
                        title: "X Label"
                    },
                    axisY: {
                        title: "Y",
                    },
                    data: [{
                            type: "column",
                            dataPoints: newSal

                        }]
                });
                chart.render();
            };

Thanks for help guys!

• This topic was modified 6 years, 11 months ago by Dali_Sarb.

[Vishwas R]

@dali_sarb,

Please take a look at this JSFiddle for rendering chart with dataPoints from form-data. Please refer our documentation on JavaScript Charts from JSON Data API and AJAX for tutorial on rendering chart with data that’s fetched via AJAX.

If this doesn’t help you resolve the issue you are facing, kindly create JSFiddle with form and sample data so that we can look into it, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS