AJAX populate graph XMLHttpRequest

• December 2, 2018 at 8:46 pm #23618
  
  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 5 years, 11 months ago by Dali_Sarb.
  December 4, 2018 at 11:02 am #23642
  
  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