Home forums Using CanvasJS How can I plot values from .txt file ?

This topic contains 35 replies, has 7 voices, and was last updated by  Suyash Singh 1 month, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 36 total)
  • Author
    Posts
  • #6771

    hitmanbaby2007
    Participant

    Hi guy, really need some good hands here !!!
    I got a file with all data I need inside, I saved it as the text file, Ex : testgraph.txt
    How can I plot those data, X axis will be set with 1,2,3,4…., Y axis will be set with values from the text file.
    Need help !!!
    Thanks a lot & I really appreciate :)

    The text file’s values :
    192
    20
    131
    38
    84
    112
    1234
    3421
    1241
    2314

    #6773

    hitmanbaby2007
    Participant

    Why it doesn’t work ?

    <!DOCTYPE html>
    
    <?PHP
    
    $file_handle = fopen("testgraph.txt", "r");
    
    while (!feof($file_handle) ) {
    
    $line_of_text = fgets($file_handle);
    $parts = explode(' ', $line_of_text);
    
    //print $parts[0]. "<BR>";
    // $parts[0]. $parts[1].
    }
    
    fclose($file_handle);
    
    ?>
    
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Generating DataPoints in a loop - jsFiddle demo by anjalij</title>
      
      <script type='text/javascript' src='/js/lib/dummy.js'></script>
      
      
      
      
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      
      <style type='text/css'>
        
      </style>
      
    
    <script type='text/javascript'>//<![CDATA[ 
    window.onload=function(){
        var limit = 100;    //increase number of dataPoints by increasing this
        var y = 0;
        var x=0;
        var data = []; var dataSeries = { type: "line" };
        var dataPoints = [];
        for (var i = 0; i < limit; i += 1) {
          y = <?php echo $parts[i] ?>;
          dataPoints.push({
              x: i,
              y: y                
          });
          x+= 0.25;       
        }
    
        dataSeries.dataPoints = dataPoints;
        data.push(dataSeries);
          
    
      var chart = new CanvasJS.Chart("chartContainer",
        {
          zoomEnabled: true,
          title:{
            text: "Generating DataPoints in a loop" 
          },
          axisX:{
            //minimum: 0, 
            //maximum: 300 ,
            valueFormatString:"0.00"     
          },
          data: data,
       });
      chart.render();
    
    }//]]>  
    
    </script>
    
    </head>
    <body>
      <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
      
    </body>
    
    </html>

    My .txt file is here :
    http://ladykillernicky.uni.me/testgraph.txt

    #6786

    Anjali
    Participant

    Hi,

    From what I can see you are trying to parse text file on the server side which is not required – we can do it on the client side itself. At the same time you have included PHP code inside javascript loop which will not work.

    <?php echo $parts[i] ?>

    Here is an example that I have created which parses your text file on the client side.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
    window.onload = function () {
    var dataPoints = [];
    
    //Replace text file's path according to your requirement.
    $.get("testgraph.txt", function(data) {
    	var x = 0;
    	var allLines = data.split('\n');
    	if(allLines.length > 0) {
    		for(var i=0; i< allLines.length; i++) {
    			dataPoints.push({x: x , y: parseInt(allLines[i])});
    			x += .25;
    		}
    	}
    	var chart = new CanvasJS.Chart("chartContainer",{
    		title :{
    			text: "Chart using Text File Data"
    		},
    		data: [{
    			type: "line",
    			dataPoints : dataPoints,
    		}]
    	});
    	chart.render();
    });
    }
    </script>
    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>


    Anjali

    #6793

    dungeonlegend
    Participant

    Thank you so so much for helping me out, I have had some roughly day to deal with this problem. May be all I need now to have some extra function such as zoom or scale to analyze the graph more easier.

    Thank you with all shining stars above the sky !!! ^^

    #6845

    dungeonlegend
    Participant

    By the way, I’ve been wondering that, why my .txt file just have a few numbers as the link I posted above but the code I used from you finally plo a lot of points, looks like it repeatedly do it again the whole number of values
    inside the .txt file. Please look at this link and you will know what I wanna say :

    http://ladykillernicky.uni.me/graph.php

    I’m using Firefox and Chrome to check them out but it shows the same results !!!

    I know what the things came wrong i< allLines.length, but I can’t solve this problem.

    • This reply was modified 2 years, 11 months ago by  dungeonlegend.
    #6896

    Sunil Urs
    Keymaster

    The text file that you provided is testgraph.txt and the one that you using in above page is testECG.txt which has values that are repeating.


    Sunil Urs

    #14767

    fbk
    Member

    hi all,
    i want to read a text file with information being updated every second and display it in a html bar graph (with a single bar) x-axis is the time and y-axis the frequency – i’ve been looking around to find a solution, tried a few codes from others but it didnt work, can someone help me please its got to be a web based technology html/jscript etc. Im totally a novice in this and your kind help would be great
    thanks

    #14774

    Suyash Singh
    Moderator

    @fbk,

    Can you please provide us more information regarding the format of the dataPoints that you are storing in text file. The data stored in the text file has to be parsed to the format required by CanvasJS. For more information kindly refer this stack overflow thread on Retrieving data from a text file.

    ___
    Suyash Singh
    Team CanvasJS

    #14775

    fbk
    Member

    hi, thanks for reply
    so the file is an outcome of MATLAB which when opens has two columns separated by space
    and has about 20 entries..the file will be stored on same computer and is refreshed every 1sec.
    from canvasJS threads i was able to come up with a solution to display randomly generated numbers in a graph but now its to be dealt with a file with real data.
    looking forward for reply
    thanks

    #14779

    Suyash Singh
    Moderator

    @fbk,

    Kindly refer this jsfiddle on creating chart from text file.

    The format of the text file( e.g. dataPoints.txt ) should be:

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

    Also refer the documentation on working with date time values in chart for more info on using date-time values on axisX.

    ___
    Suyash Singh
    Team CanvasJS

    #14781

    fbk
    Member

    hi thanks
    but thats not the case perhaps i described wrong
    the file look like this (the first column is identifier that the value is positive or negative) and the second column
    with actual value:
    pos 0.20
    neg 0.17
    neg 0.43
    pos 0.13
    pos 0.27
    neg 0.19
    neg 0.49
    pos 0.12
    . .
    . .
    so on to about 20 entries – i know how to put time on x-axis(referenced from another tutorial)
    and display its graph however with randomly generated numbers but not from a file.
    thanks

    #14784

    Suyash Singh
    Moderator

    @fbk,

    Please refer this updated jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

    #14786

    fbk
    Member

    hi thanks
    but its not working the fiddle

    #14787

    fbk
    Member

    hi
    so nice of you to bear with me ..im a dummy as you can see
    anyway here is the whole code please let me know how can i start reading the file instead of random numbers and plot a graph using this code
    the file has following contents and is updated every second
    Neg 0.75
    Pos 0.63
    Pos 0.82
    Neg 0.54
    Pos 0.67
    Pos 0.83
    Neg 0.56
    Pos 0.68
    Neg 0.58
    Neg 0.71
    Pos 0.66
    Neg 0.89
    Neg 0.71
    Pos 0.63
    Neg 0.8
    Neg 0.71
    Neg 0.69
    Pos 0.88
    Neg 0.73
    Pos 0.61
    Pos 0.89
    Neg 0.72
    Neg 0.54
    Pos 0.53
    Neg 0.57
    Neg 0.58
    Pos 0.54
    Neg 0.56
    Neg 0.68
    Pos 0.75
    Neg 0.65
    Pos 0.53
    Neg 0.72
    END -999

    the code is as follows
    <!DOCTYPE HTML>
    <html>

    <head>
    <script type=”text/javascript”>
    window.onload = function () {

    // dataPoints
    var dataPoints1 = [];
    var dataPoints2 = [];
    var dataPoints3 = [];

    var chart = new CanvasJS.Chart(“chartContainer”,{
    zoomEnabled: true,
    title: {
    text: “testing ”
    },
    toolTip: {
    shared: true

    },
    legend: {
    verticalAlign: “top”,
    horizontalAlign: “center”,
    fontSize: 14,
    fontWeight: “bold”,
    fontFamily: “calibri”,
    fontColor: “dimGrey”
    },
    axisX: {
    title: “RR @ 1 sec”
    },
    axisY:{
    prefix: ‘ ‘,
    includeZero: false
    },
    data: [{
    // dataSeries1
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “result1”,
    dataPoints: dataPoints1
    },
    {
    // dataSeries2
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “result2” ,
    dataPoints: dataPoints2
    },
    {
    // dataSeries3
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “Average” ,
    dataPoints: dataPoints3
    }],
    legend:{
    cursor:”pointer”,
    itemclick : function(e) {
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart.render();
    }
    }
    });

    var updateInterval = 1000;
    // initial value
    var yValue1 = 000;
    var yValue2 = 000;
    var yValue3 = 000;

    var time = new Date;
    /*time.setHours(9);
    */ /*time.setMinutes(30);*/
    time.setSeconds(00);
    time.setMilliseconds(00);
    // starting at 9.30 am

    var updateChart = function (count) {
    count = count || 1;

    // count is number of times loop runs to generate random dataPoints.

    for (var i = 0; i < count; i++) {

    // add interval duration to time
    time.setTime(time.getTime()+ updateInterval);

    // generating random values
    var deltaY1 = .5 + Math.random() *(-.5-.5);
    var deltaY2 = .5 + Math.random() *(-.5-.5);
    var deltaY3 = .5 + Math.random() *(-.5-.5);

    // adding random value and rounding it to two digits.
    yValue1 = Math.round((yValue1 + deltaY1)*100)/100;
    yValue2 = Math.round((yValue2 + deltaY2)*100)/100;
    yValue3 = Math.round((yValue3 + deltaY3)*100)/100;

    // pushing the new values
    dataPoints1.push({
    x: time.getTime(),
    y: yValue1
    });
    dataPoints2.push({
    x: time.getTime(),
    y: yValue2
    });
    dataPoints3.push({
    x: time.getTime(),
    y: (yValue1+yValue2)/2
    });
    };

    // updating legend text updated with y Value
    chart.options.data[0].legendText = ” result1 ” + yValue1;
    chart.options.data[1].legendText = ” result2 ” + yValue2;
    chart.options.data[2].legendText = ” Average ” + yValue3;

    chart.render();
    /* opens a smiley if positive and a sad smiley if negative value*/
    if(yValue3 > 0)
    {

    window.open(‘https://s-media-cache-ak0.pinimg.com/736x/4e/5c/f7/4e5cf7d4ccb9c59b6620a9c71944d51e.jpg’, “emowindow”,”width=400, height= 400″)
    } else if (yValue3 < 0)
    {
    window.open(‘https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png?v=1480481055’,”emowindow”,”width=400, height= 400″)
    }
    };

    // generates first set of dataPoints
    updateChart(1000);

    // update chart after specified interval
    setInterval(function(){updateChart()}, updateInterval);
    }
    </script>
    <script type=”text/javascript” src= “script/canvasjs.min.js”></script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 500px; width: 60%;”>
    </div>
    </body>
    </html>

    i truly appreciate your kind efforts towards this!
    thanks in advance

    #14799

    Suyash Singh
    Moderator

    Seems like the jsfiddle is working fine.
    You need to create a text file say dataPoints.txt with the content as shown below, browse it using the Choose File input and click Open.

    pos 0.20
    neg 0.17
    neg 0.43
    pos 0.13
    pos 0.27
    neg 0.19
    neg 0.49
    pos 0.12

    If you are still facing any issue kindly reproduce the same in jsfiddle so that we can look into the issue and help you better.

    ___
    Suyash Singh
    Team CanvasJS

Viewing 15 posts - 1 through 15 (of 36 total)

You must be logged in to reply to this topic.