Home forums Using CanvasJS AJAX populate graph XMLHttpRequest

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 2 weeks, 1 day ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #23618

    Dali_Sarb
    Member

    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 2 weeks, 3 days ago by  Dali_Sarb.
    #23642

    Vishwas R
    Keymaster

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.