Home forums Using CanvasJS Simple chart update using XMLHttp

This topic contains 1 reply, has 2 voices, and was last updated by  Indranil Deo 5 days, 9 hours ago.

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

    hknight
    Member

    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://canvasjs.com/assets/script/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>

    #16053

    Indranil Deo
    Member

    @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

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

You must be logged in to reply to this topic.