Home Forums Chart Support Simple chart update using XMLHttp

Simple chart update using XMLHttp

Viewing 2 posts - 1 through 2 (of 2 total)
  • #16046

    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
    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>
    <h2>The XMLHttpRequest Object</h2>
    <p id="demo">Let AJAX change this text.</p>
    <button type="button" onclick="loadDoc()">Change Content</button>
    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);
    <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", {
    			text: "My First Chart in CanvasJS"              
    		data: [              
    			// Change type to "doughnut", "line", "splineArea", etc.
    			type: "line",
    			dataPoints: dataPoints
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>


    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

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

You must be logged in to reply to this topic.