Home forums Using CanvasJS Plotting curves from real-time data

This topic contains 7 replies, has 2 voices, and was last updated by  Priyanka M S 2 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21106

    khammad
    Member

    Hi Sandeep,

    Thanks for your email response to my initial request.

    My question is:
    How can I use the below chart (for example) to plot a real-time data that is continuously fed to a text file ?

    Thanks.

    Karim

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=”UTF-8″>
    <script>
    window.onload = function () {

    var dps = [];
    var chart = new CanvasJS.Chart(“chartContainer”, {
    exportEnabled: true,
    title :{
    text: “Dynamic Spline Chart”
    },
    axisY: {
    includeZero: false
    },
    data: [{
    type: “spline”,
    markerSize: 0,
    dataPoints: dps
    }]
    });

    var xVal = 0;
    var yVal = 100;
    var updateInterval = 1000;
    var dataLength = 50; // number of dataPoints visible at any point

    var updateChart = function (count) {
    count = count || 1;
    // count is number of times loop runs to generate random dataPoints.
    for (var j = 0; j < count; j++) {
    yVal = yVal + Math.round(5 + Math.random() *(-5-5));
    dps.push({
    x: xVal,
    y: yVal
    });
    xVal++;
    }
    if (dps.length > dataLength) {
    dps.shift();
    }
    chart.render();
    };

    updateChart(dataLength);
    setInterval(function(){ updateChart() }, updateInterval);

    }
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 370px; max-width: 920px; margin: 0px auto;”></div>
    <script src=”../../canvasjs.min.js”></script>
    </body>
    </html>

    #21122

    Priyanka M S
    Member

    @khammad,

    It is possible to render chart from a dynamically updating text file. Please take a look at this jsfiddle.
    The format of the text file(datapoints.txt) should be as below (representing x and y values):

    10 20
    15 25
    20 15
    25 33
    30 9
    35 15
    40 20

    __
    Priyanka M S
    Team CanvasJS

    #21160

    khammad
    Member

    Thank you Priyanka for your response!

    Since I am using my own editor (i.e., Sublime Text), could you please explain to me how to modify the provided code in the jsfiddle to read the data directly from a specific text file without the need to choose the file from my browser window every time I run the code ?

    Thanks for your time and help!

    Sincerely,

    Karim

    #21209

    Priyanka M S
    Member

    @khammad,

    In order to load a local file on browser, you need to have a local server running in your system to avoid cross origin requests which most of the browsers doesn’t support. You can read data directly from a local text file (sample.txt), please take a look at this sample project.

    __
    Priyanka M S
    Team CanvasJS

    #21227

    khammad
    Member

    Thank you again Priyanka.

    For some reason, the attached sample project above seems to have problem.

    when I try to run the code, the plot is not showing up on my browser as expected!

    p.s. I placed both of index.html and sample-data.txt in the same directory. I am also using the free license for non-commercial use.

    Can you please advise ?

    Sincerely,

    Karim

    #21232

    Priyanka M S
    Member

    @khammad,

    Can you please check browser console for any errors?

    __
    Priyanka M S
    Team CanvasJS

    #21242

    khammad
    Member

    I tried many times and the web page just keeps appearing blank (i.e., no errors are showing up).

    I am using GoogleChrome as my default browser.

    I think that there is something wrong with the code of the last sample project you sent but I can’t figure it out!

    I tried many times running it and never return output.

    Any suggestions ?

    Thanks.

    Karim

    #21254

    Priyanka M S
    Member

    @khammad,

    In this scenario, you should have a local server to load local text files as browsers do not support local files due to cross origin requests. Here is a tutorial on setting up a local server, which might be of help.

    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.