By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,962 Members | 1,889 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,962 IT Pros & Developers. It's quick & easy.

import data from a csv

Uncle Dickie
P: 67
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.
Dec 1 '08 #1
Share this Question
Share on Google+
6 Replies


P: 62
I think this is possible in IE (not sure about other browsers) using the ActiveX controls (for file access, see Scripting.FileSystemObject), but you may have to parse the csv file yourself.
Dec 1 '08 #2

rnd me
Expert 100+
P: 427
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.
Dec 1 '08 #3

gits
Expert Mod 5K+
P: 5,390
do you need that as a clientside solution only? what should happen with the data later on?

kind regards
Dec 1 '08 #4

Uncle Dickie
P: 67
Hi all,

thanks for your help so far!

I am having some joy with it as follows:

Expand|Select|Wrap|Line Numbers
  1. var myFileSysObj = new ActiveXObject("Scripting.FileSystemObject");
  2.     var myInputTextStream = myFileSysObj.OpenTextFile(tmp, 1, true);
  3.     var myOutputTextStream = new Array();
  4.     var i=0;    
  5.  
  6.     while(!myInputTextStream.AtEndOfStream)
  7.     {    
  8.         myOutputTextStream[i] = myInputTextStream.ReadLine();
  9.         i++
  10.     }
  11.  
  12.     myInputTextStream.Close();
  13.  
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.
Dec 1 '08 #5

P: 62
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(delimiter) 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]=myOutputTextStream[i].split(',')... will give you a two dimensional array of your values (not sure if you have extra spaces though).
Dec 2 '08 #6

Uncle Dickie
P: 67
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:
Expand|Select|Wrap|Line Numbers
  1. ~inc:header.inc~
  2. <div id="content">
  3. <div id="status">
  4.     <div id="loading" style="display:none">
  5.         Error:<br />Connection to the EL-NET-1 was lost.<br />
  6.     </div>
  7.     <div id="browsers" style="display:none">
  8.         Error:<br />Too many windows open viewing this EL-NET-1.<br />
  9.     </div>
  10.     <div id="display">
  11.         <table border="0" cellspacing="0" cellpadding="0" width="100%">
  12.             <tr>
  13.                 <td>
  14.                     <form method="POST" focus="cmuds" name="gform" enctype="multipart/form-data">
  15.                     <table width=100%>
  16.                         <tr>
  17.                             <td align="left">
  18.                                 <input type="file" name="cmuds" size="45">
  19.                             </td>
  20.                             <td>
  21.                             </td>
  22.                             <td align="right">
  23.                                 <input TYPE="button" VALUE=" Graph " STYLE="width: 140px;" onClick="checkFile()" value="Preview">
  24.                             </td>
  25.                         </tr>
  26.                     </table>
  27.                     </form>
  28.                 </td>
  29.             </tr>
  30.         </table>
  31.         <br />
  32.         <br />
  33.         <div id="myGraph">
  34.             Unfortunately, graphing is only available in Internet Explorer
  35.         </div>
  36.     </div>
  37. </div>
  38. </div>
  39.  
  40. <script type="text/javascript">
  41. function checkFile()
  42. {
  43.     tmp=document.gform.cmuds.value;
  44.     if (tmp.length<1)
  45.     {
  46.         alert('Please enter a file to graph before continuing')
  47.         document.gform.cmuds.focus();
  48.         return false;
  49.     }
  50.     var myFileSysObj = new ActiveXObject("Scripting.FileSystemObject");
  51.     var myInputTextStream = myFileSysObj.OpenTextFile(tmp, 1, true);
  52.     var myOutputTextStream = new Array();
  53.     var i=0;    
  54.     while(!myInputTextStream.AtEndOfStream)
  55.     {    
  56.         a = myInputTextStream.ReadLine();
  57.         for (j = 0; j = 2; j++)
  58.         {
  59.             b = a.indexOf(",");
  60.             if (b == -1)
  61.             {
  62.                 myOutputTextStream[i] = a;
  63.                 i++;
  64.                 break;
  65.             }
  66.             else
  67.             {
  68.                 myOutputTextStream[i] = a.substring(0, b);
  69.                 a = a.substring(b+1, 100);
  70.                 i++;
  71.             }
  72.         }
  73.     }
  74.     myInputTextStream.Close();
  75.     var sData = 0;
  76.     var tScale;
  77.     var lName;
  78.     var sTime;
  79.     var lInt;
  80.     for (x=0; x<myOutputTextStream.length; x++) 
  81.     {
  82.         if (myOutputTextStream[x] == "Scale") 
  83.         {
  84.             tScale = myOutputTextStream[x+1];
  85.         }
  86.         if (myOutputTextStream[x] == "Logger Name") 
  87.         {
  88.             lName = myOutputTextStream[x+1];
  89.         }
  90.         if (myOutputTextStream[x] == "Start Time") 
  91.         {
  92.             sTime = myOutputTextStream[x+1];
  93.         }
  94.         if (myOutputTextStream[x] == "Logging Interval") 
  95.         {
  96.             lInt = myOutputTextStream[x+1];
  97.         }
  98.         if (myOutputTextStream[x] == "Dewpoint") 
  99.         {
  100.             sData = x+1;
  101.             break;
  102.         }
  103.     } 
  104.     var myReadings = (myOutputTextStream.length - sData)/3;
  105.     var myStep;
  106.     if (myReadings < 300)
  107.     {
  108.         myStep = 3;
  109.     }
  110.     else
  111.     {
  112.         myStep = (Math.floor(myReadings / 400))*3;
  113.     }
  114.     output = '<table border="0" cellspacing="0" cellpadding="0"><tr>'
  115.     for (y=sData; y<myOutputTextStream.length; y=y+myStep)
  116.     {
  117.         myNum = +myOutputTextStream[y] * 3;
  118.         output+= '<td valign="bottom" width="1"><img src="pollr.gif" width="1" height="' + myNum + '"></td>'
  119.     }
  120.     output+='</tr><tr>'
  121.     for (y=sData+1; y<myOutputTextStream.length; y=y+myStep)
  122.     {
  123.         myNum = +myOutputTextStream[y] * 3;
  124.         output+= '<td valign="bottom" width="1"><img src="pollb.gif" width="1" height="' + myNum + '"></td>'
  125.     }
  126.     output+='</tr><tr>'
  127.     for (y=sData+2; y<myOutputTextStream.length; y=y+myStep)
  128.     {
  129.         myNum = +myOutputTextStream[y] * 3;
  130.         output+= '<td valign="bottom" width="1"><img src="pollg.gif" width="1" height="' + myNum + '"></td>'
  131.     }
  132.     output+='</tr></table>'
  133.     document.getElementById("myGraph").innerHTML = output;
  134. }
  135. </script>
  136. ~inc:footer.inc~
  137.  


CSV:

Logger Name,EL-NET-2
MAC Address,00:1F:94:00:00:00
Start Time,03/10/2008 00:00:13
Scale,C
Logging Interval,10
Temperature,Humidity,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
Dec 2 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.