You must be logged in to post your query.
Home › Forums › Chart Support › AJAX populate graph XMLHttpRequest
Tagged: AJAX, populate, update, XMLHttpRequest
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!
@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
You must be logged in to reply to this topic. Login/Register