Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

    How to seperate data from txt file to make array

    I'm trying to use the method here
    http://www.hunlock.com/blogs/Flickr_..._in_Javascript
    to fetch data from a file and use that data to fill an array that will be used to plot a graph.

    I'm using canvas to graph the latest data sets for CO2 concentration and Average Global Temp Anomaly from NOAA and GISS. I'm hoping I can use the dat file, but if not, I can make the script work using txt files. I don't want to have to add all the array parts to the data by hand. I'd like to split the data and make an array which I can then pick apart to make the new data array.

    What's the best way to seperate the data? I tried to split by " " but I get a bunch of extra array slots. Should I use replace? Or is there a better way? Regex? I don't know where to find the right info.

    here's what I have so far after stripping the script down to the ajax routine and simply displaying the the data into an element from a txt file I saved of the dat file from NOAA.
    ftp://ftp.ncdc.noaa.gov/pub/data/ano...1-2000mean.dat
    Code:
    <HTML>
    <HEAD>
       <TITLE>Javascript Filmstrip: Example #6</title>
       <style type='text/css'>
                                                                                                  
       </style>
    </HEAD>
    <BODY >
    <P>
    
    
    <P><div id='filmstrip' class='filmstrip'></div>
    
    
    <script type='text/javascript'>
    function importData(fileName) {
          var AJAX = null;                                               
          if (window.XMLHttpRequest) {                                   
             AJAX=new XMLHttpRequest();                                  
          } else {                                                       
             AJAX=new ActiveXObject("Microsoft.XMLHTTP");                
          }                                                              
          if (AJAX==null) {                                              
             alert("Your browser doesn't support AJAX.");                					
             return false                                                
          } else {
             AJAX.onreadystatechange = function() {                      
                if (AJAX.readyState==4 || AJAX.readyState=="complete") {
                   processData(AJAX.responseText);
                }                                                        
             }                                                           
             AJAX.open("GET", fileName, true);                           
             AJAX.send(null);                                            
             return true;                                                
          }                                                                              
       }
       
    function processData (dat) {
    alert(dat)
    var _filmstrip  = document.getElementById('filmstrip'); 
    //vals= new Array()  
    //for(i in dat.split(' ')){vals[i]=dat.split(' ');}      
    //for (i in vals)_filmstrip.innerHTML+=""+vals[i]+"<br>"
          _filmstrip.innerHTML+=dat.split(' ')
        alert(_filmstrip.innerHTML)     
    }
    
    importData("tempdata.txt");                                   
    </script>
    </body>
    </HTML>

    here's the graphing script with an example of the array I want to make with the dat file similar to this file
    ftp://ftp.ncdc.noaa.gov/pub/data/ano...1-2000mean.dat
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head><title>Trig</title>
    
      
        <script src="excanvas.js"></script>
        <script>
    var oldx=0;
    var oldy=100;
    var year=1856
    var data=[
    [1880,  -0.344036],
    [1881,  -0.344982],
    [1882,  -0.228487],
    [1883,  -0.524247],
    [1884,  -0.635516],
    [1885,  -0.477925],
    [1886 , -0.335131],
    [1887 , -0.409823],
    [1888 , -0.508290],
    [1889 , -0.227036],
    [1890 , -0.290201],
    [1891 , -0.426231],
    [1892 , -0.497375],
    [1893 , -0.642192],
    [1894 , -0.246666],
    [1895 , -0.428321],
    [1896 , -0.260336],
    [1897 , -0.216169],
    [1898 , -0.215929],
    [1899 , -0.184954],
    [1900 , -0.078842],
    [1901 , -0.068821],
    [1902 , -0.306031],
    [1903 , -0.320130],
    [1904 , -0.429554],
    [1905 , -0.296281],
    [1906 , -0.091325],
    [1907 , -0.529929],
    [1908 , -0.358083],
    [1909 , -0.295405],
    [1910 , -0.213853],
    [1911 , -0.295052],
    [1912 , -0.370940],
    [1913 , -0.202547],
    [1914 ,  0.011989],
    [1915 , -0.014213],
    [1916 , -0.280121],
    [1917 , -0.614828],
    [1918 , -0.307934],
    [1919 , -0.193687],
    [1920 , -0.148216],
    [1921 ,  0.066907],
    [1922 , -0.124768],
    [1923 , -0.137721],
    [1924 , -0.199232],
    [1925 , -0.050831],
    [1926 ,  0.064004],
    [1927 , -0.106510],
    [1928 , -0.047447],
    [1929 , -0.334709],
    [1930 ,  0.033100],
    [1931 ,  0.040111],
    [1932 ,  0.024013],
    [1933 , -0.239074],
    [1934 ,  0.082515],
    [1935 , -0.058061],
    [1936 , -0.040408],
    [1937 ,  0.049362],
    [1938 ,  0.228629],
    [1939 ,  0.136072],
    [1940 ,  0.023097],
    [1941 ,  0.043487],
    [1942 , -0.007908],
    [1943 ,  0.054327],
    [1944 ,  0.151333],
    [1945 , -0.072486],
    [1946 ,  0.041469],
    [1947 ,  0.040128],
    [1948 ,  0.074626],
    [1949 , -0.057509],
    [1950 , -0.243793],
    [1951 , -0.065635],
    [1952 , -0.014049],
    [1953 ,  0.173983],
    [1954 , -0.136416],
    [1955 , -0.131948],
    [1956 , -0.430918],
    [1957 , -0.037554],
    [1958 ,  0.099469],
    [1959 ,  0.023884],
    [1960 , -0.033346],
    [1961 ,  0.079241],
    [1962 ,  0.059712],
    [1963 ,  0.058577],
    [1964 , -0.264021],
    [1965 , -0.205978],
    [1966 , -0.093471],
    [1967 , -0.098001],
    [1968 , -0.181516],
    [1969 , -0.106779],
    [1970 , -0.039187],
    [1971 , -0.169092],
    [1972 , -0.225938],
    [1973 ,  0.163408],
    [1974 , -0.267711],
    [1975 , -0.051878],
    [1976 , -0.363404],
    [1977 ,  0.110061],
    [1978 , -0.053118],
    [1979 ,  0.062313],
    [1980 ,  0.136929],
    [1981 ,  0.339575],
    [1982 ,  0.000802],
    [1983 ,  0.320781],
    [1984 , -0.076346],
    [1985 , -0.076297],
    [1986 ,  0.120761],
    [1987 ,  0.271229],
    [1988 ,  0.390109],
    [1989 ,  0.297215],
    [1990 ,  0.547118],
    [1991 ,  0.363143],
    [1992 ,  0.089922],
    [1993 ,  0.153949],
    [1994 ,  0.396052],
    [1995 ,  0.429150],
    [1996 ,  0.158410],
    [1997 ,  0.434289],
    [1998 ,  0.862866],
    [1999 ,  0.607844],
    [2000 ,  0.474249],
    [2001 ,  0.640145],
    [2002 ,  0.749179],
    [2003 ,  0.700211],
    [2004 ,  0.649329],
    [2005 ,  0.736649],
    [2006 ,  0.804326]
    ];
    
    var widthline=data.length*10
    function plot(x, y) {
    ctx.lineWidth=3
    ctx.shadowBlur 	  = 3;
    ctx.shadowColor   = "#999900";
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 5;
    
    
    ctx.save();
    ctx.beginPath()
    ctx.strokeRect(x, y, 2, 2);
    ctx.strokeStyle='rgba(0,0,0,.05)'
    ctx.strokeRect(0,x, widthline, 1);
    ctx.strokeRect(x,0, 1, 800);
    ctx.strokeStyle='rgba(0,0,255,1)'
    if(x%50==0){ctx.strokeRect(x,390, 1, 20);}
    ctx.closePath()  
     ctx.restore(); 
    
    ctx.save();
    ctx.beginPath()
    ctx.moveTo(oldx,oldy)
    ctx.lineTo(x, y);
    ctx.strokeStyle='rgba(255,255,0,1)'
    ctx.stroke()
    ctx.closePath()
    ctx.restore();
    oldx=x;
    oldy=y;
      }
    
    
    
          function go() {
    ctx = document.getElementById("theCanvas").getContext("2d");
    ctx.beginPath();
    ctx.strokeStyle='rgba(0,0,255,1)'
          ctx.moveTo(0, 0);
          ctx.lineTo(0, 800);
          ctx.moveTo(0, 400);
          ctx.lineTo(widthline, 400);
    ctx.stroke();
    ctx.closePath();
    ctx.restore()
    
    for(i in data){
    var Nx = i*10
    var Ny = 400-(data[i][1]*400)
          plot(Nx, Ny);
    
          }
    
          
          }
        </script></head><body onload="go()">
        
        <canvas id="theCanvas" width="1300" height="800" style="width: 750px; height: 400px;"></canvas>
        
    </body></html>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    where txt=
    Code:
    1880   -0.5350
    1881   -0.4182
    1882   -0.3941
    1883   -0.5428
    1884   -0.6138
    1885   -0.4931
    1886   -0.4152
    1887   -0.3868
    1888   -0.4300
    1889   -0.3322
    1890   -0.3829
    1891   -0.4758
    1892   -0.4368
    1893   -0.4595

    Code:
    // for IE compat, you need this Array.map code, otherwise it can be removed:
    if (!Array.prototype.map) {
      Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}
      var res = new Array(len);var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}
     return res;};
    } //end IE compat
    
    
    function parseDAT(dat){
      var r=dat.split(/\r?\n/g);
      return r.map(function(a){return a.split(/\s+/g).map(Number);});
    }
    
    alert(parseDAT(txt));
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I just popped back after working on this other example I found. I'm trying to figure out how to make an array with the data, so the print out and the alert are just to debug. I want to just use the array that gets made. I'm going to post this code because it's so close to doing what I want , but i don't know why it doesn't keep all the data.


    I'll try to use your solution, thanks for the help. I'll be back. LOL
    Code:
    <HTML><HEAD>
    <SCRIPT language = "Javascript">
    var data = new Array();
    var splitdata=new Array()
    var i = 0;
    var datafile = window.location.href.substring(0,
         window.location.href.lastIndexOf("/") + 1) +
         "newdata.txt";
    var url = new java.net.URL(datafile);
    var connect = url.openConnection();
    var input = new java.io.BufferedReader(
         new java.io.InputStreamReader(
             connect.getInputStream()));
    var aLine = ""
    while((aLine = input.readLine()) != null) {
        data[i++] = aLine;
    
        }
    </SCRIPT>
    <BODY>
    
    <SCRIPT language = "Javascript">
    
    //for (z in data) {splitdata[z] = data[z].split(' ');}
    for (x in data){ splitdata[x]=parseFloat(data[x]);if (isNaN(splitdata[x])){splitdata.slice(x,1)}}
    var temp = ""
    for (var j = 0; j < data.length ; j++)
    if (j==0) {  temp +="[["+ data[j].split('&nbsp') + "],<br>";}
    else
    if (j!=data.length-1) {  temp +="["+ data[j].split('&nbsp') + "],<br>";}
    else
    if (j==data.length-1) {  temp +="["+ data[j].split('&nbsp') + "]]<br>";}
    document.write(temp);
    alert(splitdata)
    </SCRIPT>
    </BODY></HTML>

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I don't know how to implement your script. Thanks for trying. I'm just not up to speed on what it does so I'd have to spend a while just figuring it out. LOL.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    Quote Originally Posted by TinyScript View Post
    I don't know how to implement your script. Thanks for trying. I'm just not up to speed on what it does so I'd have to spend a while just figuring it out. LOL.
    Good thing I know...

    Code:
    <HTML>
    <HEAD>
       <TITLE>Javascript Filmstrip: Example #6</title>
       <style type='text/css'>
                                                                                                  
       </style>
    </HEAD>
    <BODY >
    <P>
    
    
    <P><div id='filmstrip' class='filmstrip'></div>
    
    
    <script type='text/javascript'>
    
    function IO(U, V) {
        var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
        X.open('GET', U, !1);
        X.setRequestHeader('Content-Type', 'text/html')
        X.send(V ? V : '');
      return X.responseText;
    }
    
    
    // for IE compat, you need this Array.map code, otherwise it can be removed:
    if (!Array.prototype.map) {
      Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}
      var res = new Array(len);var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}
     return res;};
    } //end IE compat
    
    
    function parseDAT(dat){
      var r=dat.split(/\r?\n/g);
      return r.map(function(a){return a.split(/\s+/g).map(Number);});
    }
    
    
     
    function processData (dat) {
    alert(dat)
    var _filmstrip  = document.getElementById('filmstrip'); 
    //vals= new Array()  
    //for(i in dat.split(' ')){vals[i]=dat.split(' ');}      
    //for (i in vals)_filmstrip.innerHTML+=""+vals[i]+"<br>"
          _filmstrip.innerHTML+=dat.join("<BR>");
        alert(_filmstrip.innerHTML)     
    }
    
    
    //importData("tempdata.txt");                                   
    
    processData(
       parseDAT(
         IO(  "tempdata.txt")));
    </script>
    </body>
    </HTML>
    now what exactly are you wanting to do with the output?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    TinyScript (04-29-2009)

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I'm going to graph climate data with it to begin with.
    I'll be plotting CO2 concentration Vs average global temperature anomaly, which is a fancy way of saying the running average. It's just a simple exercise to learn a few things and create something moderately useful.

    I will try your solution, and I thank you very much for helping me. I'm trying to do some carpentry around the house today, but this has been bugging me. LOL thanks again.

    Sweet!! thanks!
    Last edited by TinyScript; 04-29-2009 at 11:55 PM.

  • #7
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    Good thing I know...
    This is really quite useful, thanks a lot. A lot of this is relevant to a current project of mine as well.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •