FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Plotting curves from real-time data

Plotting curves from real-time data

Viewing 8 posts - 1 through 8 (of 8 total)
  • June 15, 2018 at 3:46 am #21106

    khammad

    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>

    June 15, 2018 at 2:03 pm #21122

    Priyanka M S

    @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

    June 19, 2018 at 7:15 pm #21160

    khammad

    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

    June 22, 2018 at 4:02 pm #21209

    Priyanka M S

    @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

    June 22, 2018 at 10:44 pm #21227

    khammad

    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

    June 25, 2018 at 10:12 am #21232

    Priyanka M S

    @khammad,

    Can you please check browser console for any errors?

    __
    Priyanka M S
    Team CanvasJS

    June 25, 2018 at 11:51 pm #21242

    khammad

    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

    June 26, 2018 at 1:08 pm #21254

    Priyanka M S

    @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.