How to seperate data from txt file to make array

TinyScript

04-29-2009, 05:47 PM

I'm trying to use the method here
http://www.hunlock.com/blogs/Flickr_Filmstrips_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/anomalies/annual.land.90S.90N.df_1901-2000mean.dat

<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/anomalies/annual.land.90S.90N.df_1901-2000mean.dat

<!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>

rnd me

04-29-2009, 08:25 PM

where txt=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

// 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));

TinyScript

04-29-2009, 10:09 PM

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

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

TinyScript

04-29-2009, 10:33 PM

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.

rnd me

04-29-2009, 11:42 PM

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

<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?

TinyScript

04-29-2009, 11:52 PM

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!

cf.canton

04-30-2009, 07:05 AM

Good thing I know...http://www.tracker-analytics.com/track/img/3765/s09v0317fvxp/00.gif

This is really quite useful, thanks a lot. A lot of this is relevant to a current project of mine as well.