import data from a csv

[Uncle Dickie]

Hi All,

I have an application where I need to import the contents of a csv file and then graph the results.

Is it possible using javascript to:
Browse for a document then copy the contents of the document to an array (or equivalent)?

Any pointers would be much appreciated.

[limweizhong]

I think this is possible in IE (not sure about other browsers) using the ActiveX controls (for file access, see Scripting.FileS ystemObject), but you may have to parse the csv file yourself.

[rnd me]

is this for a public of private webpage?
if it's public, only firefox 3 will be able to do this without security over-rides.

[gits]

do you need that as a clientside solution only? what should happen with the data later on?

kind regards

[Uncle Dickie]

Hi all,

thanks for your help so far!

I am having some joy with it as follows:

var myFileSysObj = new ActiveXObject("Scripting.FileSystemObject");
	var myInputTextStream = myFileSysObj.OpenTextFile(tmp, 1, true);
	var myOutputTextStream = new Array();
	var i=0;	

	while(!myInputTextStream.AtEndOfStream)
	{	
		myOutputTextStream[i] = myInputTextStream.ReadLine();
		i++
	}

	myInputTextStream.Close();

This has got me part of the way there. I now have to split each line into 3 different entries in the array - each line will be something like 27, 29, 50 (they are readings from 3 different sensors). I will probably use string functions to split it on the commas.

This is all for an embedded product that records data and emails it to a user.

The web interface allows for set-up of the product and real time viewing of data but now I have been asked to include a 'graph' function that can take one of the emailed files and graph it on screen. I'm not sure if it will be possible as I have very limited code space and am already taking up quite a lot of it with the existing functionality.

[limweizhong]

If it's just taking the 'emailed' files (what does this mean?) and plotting a graph, you could get users to upload their files, and use PHP instead... as compared to this, it would work on all browsers, and have less warnings.

I have not touched PHP for quite long, maybe other people can help? Though if you want a PHP solution you should post it in the PHP forum.

If you want to continue your Javascript however, you could use the member function String.split(de limiter) which will return an array of the text data where each element was separated from the next by the delimiter. So in your loop, myOutputArray[i]=myOutputTextSt ream[i].split(',')... will give you a two dimensional array of your values (not sure if you have extra spaces though).

[Uncle Dickie]

OK, I have it working in IE now (the graph side of it is not doing exactly what I want, but it is good enough as proof of concept and I can play with that side to my heart's content)

Is there a way that I can do the ActiveX part so that it will work in browsers other than IE?

Web page, and example csv follow below.

• pollr.gif, pollb.gif and pollg.gif are just single pixel images in different colours

Page:

~inc:header.inc~
<div id="content">
<div id="status">
	<div id="loading" style="display:none">
		Error:<br />Connection to the EL-NET-1 was lost.<br />
	</div>
	<div id="browsers" style="display:none">
		Error:<br />Too many windows open viewing this EL-NET-1.<br />
	</div>
	<div id="display">
		<table border="0" cellspacing="0" cellpadding="0" width="100%">
			<tr>
				<td>
					<form method="POST" focus="cmuds" name="gform" enctype="multipart/form-data">
					<table width=100%>
						<tr>
							<td align="left">
								<input type="file" name="cmuds" size="45">
							</td>
							<td>
							</td>
							<td align="right">
								<input TYPE="button" VALUE=" Graph " STYLE="width: 140px;" onClick="checkFile()" value="Preview">
							</td>
						</tr>
					</table>
					</form>
				</td>
			</tr>
		</table>
		<br />
		<br />
		<div id="myGraph">
			Unfortunately, graphing is only available in Internet Explorer
		</div>
	</div>
</div>
</div>

<script type="text/javascript">
function checkFile()
{
	tmp=document.gform.cmuds.value;
	if (tmp.length<1)
	{
		alert('Please enter a file to graph before continuing')
		document.gform.cmuds.focus();
		return false;
	}
	var myFileSysObj = new ActiveXObject("Scripting.FileSystemObject");
	var myInputTextStream = myFileSysObj.OpenTextFile(tmp, 1, true);
	var myOutputTextStream = new Array();
	var i=0;	
	while(!myInputTextStream.AtEndOfStream)
	{	
		a = myInputTextStream.ReadLine();
		for (j = 0; j = 2; j++)
		{
			b = a.indexOf(",");
			if (b == -1)
			{
				myOutputTextStream[i] = a;
				i++;
				break;
			}
			else
			{
				myOutputTextStream[i] = a.substring(0, b);
				a = a.substring(b+1, 100);
				i++;
			}
		}
	}
	myInputTextStream.Close();
	var sData = 0;
	var tScale;
	var lName;
	var sTime;
	var lInt;
	for (x=0; x<myOutputTextStream.length; x++) 
	{
		if (myOutputTextStream[x] == "Scale") 
		{
			tScale = myOutputTextStream[x+1];
		}
		if (myOutputTextStream[x] == "Logger Name") 
		{
			lName = myOutputTextStream[x+1];
		}
		if (myOutputTextStream[x] == "Start Time") 
		{
			sTime = myOutputTextStream[x+1];
		}
		if (myOutputTextStream[x] == "Logging Interval") 
		{
			lInt = myOutputTextStream[x+1];
		}
		if (myOutputTextStream[x] == "Dewpoint") 
		{
			sData = x+1;
			break;
		}
	} 
	var myReadings = (myOutputTextStream.length - sData)/3;
	var myStep;
	if (myReadings < 300)
	{
		myStep = 3;
	}
	else
	{
		myStep = (Math.floor(myReadings / 400))*3;
	}
	output = '<table border="0" cellspacing="0" cellpadding="0"><tr>'
	for (y=sData; y<myOutputTextStream.length; y=y+myStep)
	{
		myNum = +myOutputTextStream[y] * 3;
		output+= '<td valign="bottom" width="1"><img src="pollr.gif" width="1" height="' + myNum + '"></td>'
	}
	output+='</tr><tr>'
	for (y=sData+1; y<myOutputTextStream.length; y=y+myStep)
	{
		myNum = +myOutputTextStream[y] * 3;
		output+= '<td valign="bottom" width="1"><img src="pollb.gif" width="1" height="' + myNum + '"></td>'
	}
	output+='</tr><tr>'
	for (y=sData+2; y<myOutputTextStream.length; y=y+myStep)
	{
		myNum = +myOutputTextStream[y] * 3;
		output+= '<td valign="bottom" width="1"><img src="pollg.gif" width="1" height="' + myNum + '"></td>'
	}
	output+='</tr></table>'
	document.getElementById("myGraph").innerHTML = output;
}
</script>
~inc:footer.inc~

CSV:

Logger Name,EL-NET-2
MAC Address,00:1F:9 4:00:00:00
Start Time,03/10/2008 00:00:13
Scale,C
Logging Interval,10
Temperature,Hum idity,Dewpoint
26.7,35.8,10.3
26.7,35.8,10.3
26.7,35.8,10.3
26.7,35.8,10.3
26.7,35.8,10.3
26.7,35.8,10.3
26.7,35.8,10.3
26.8,35.8,10.4