You must be logged in to post your query.
Home › Forums › Chart Support › Simple chart update using XMLHttp
Tagged: external, update, xmlhttp
Hi, This is my first attempt to set up a server (on an arduino Yun). I have managed to host a webpage with the examples of canvasJS charts using static data embedded in the page as a javascript var. Can you give a simple demo of calling an external file containing datapoints to update the chart. I can have the data in the external file as a text string of the format [{x1:y1,x2:y2,x3:y3}]. I have the following script that uses XMLHHTTP to call in the text string [{1:5,2:10,3:7,4:23}] It is displayed in the paragraph “demo” but no chart is rendered. Any help you can give on this would be much appreciated by a newbee
<!DOCTYPE html> <html> <body> <h2>The XMLHttpRequest Object</h2> <p id="demo">Let AJAX change this text.</p> <button type="button" onclick="loadDoc()">Change Content</button> <script> function loadDoc() { var myvar; if (window.XMLHttpRequest) { // code for modern browsers myvar = new XMLHttpRequest(); } else { // code for IE6, IE5 myvar = new ActiveXObject("Microsoft.XMLHTTP"); } myvar.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; myvar.open("GET", "test1.txt", true); myvar.send(); } </script> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script type="text/javascript"> var dataPoints=[]; for(key in myvar){ dataPoints.push({label: key, y: myvar[key]}); } window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "My First Chart in CanvasJS" }, data: [ { // Change type to "doughnut", "line", "splineArea", etc. type: "line", dataPoints: dataPoints } ] }); chart.render(); } </script> <div id="chartContainer" style="height: 300px; width: 100%;"></div> </body> </html>
@hknight,
After parsing the data please update the dataPoints and render the chart.
Please take a look at the sample given in this link.
__________ Indranil Deo, Team CanvasJS
You must be logged in to reply to this topic. Login/Register