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

This topic contains 5 replies, has 4 voices, and was last updated by  Sunil Urs 2 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 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="http://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, 3 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

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

You must be logged in to reply to this topic.