Sample data generation and table display

examples/upload_file.html

@@ -26,6 +26,12 @@ <h6 class="or"><span>OR</span></h2>
 		<div class="upload_button">
 			<button type="button" class="btn btn-primary">Upload CSV</button>
 		</div>
+		<div>
+			<table id="tablex" border="1"></table>
+		</div>
+		<div>
+			<table id="tabley" border="1"></table>
+		</div>
 	</div>
 
 </body>

src/parsing.js

@@ -1,7 +1,106 @@
+//dynamic table for selecting column for X-Axis
+function sampleDataY(sampleData,headers){
+	document.getElementById('tabley').innerHTML="";
+	var trhead=document.createElement('tr');
+	for (var i=0;i<headers.length;i++){
+		var td=document.createElement('td');
+		var checkbox=document.createElement('input')
+		checkbox.type = 'checkbox';
+		checkbox.value = headers[i];
+		checkbox.name = 'y_axis_column';
+		td.appendChild(document.createTextNode(headers[i]));
+		td.appendChild(checkbox);
+		trhead.appendChild(td);
+	}
+	document.getElementById('tabley').appendChild(trhead);
+	for(var i=0;i<5;i++){
+		var tr=document.createElement('tr');
+		for(var j=0;j<headers.length;j++){
+			var td=document.createElement('td');
+			td.appendChild(document.createTextNode(sampleData[j][i]));
+			tr.appendChild(td);
+		}
+		document.getElementById('tabley').appendChild(tr);
+	}
+	var columns = new Array(); 
+	$('input[name=y_axis_column]').click(function() {
+		$("input[name=y_axis_column]:checked").each(function(){
+		    columns.push($(this).val());
+		    var y_axis_column_names=[...new Set(columns)];
+			console.log(y_axis_column_names);
+		});
+	});
+
+
+}
+function sampleDataX(sampleData,headers){
+	document.getElementById('tablex').innerHTML="";
+	var trhead=document.createElement('tr');
+	for (var i=0;i<headers.length;i++){
+		var td=document.createElement('td');
+		var radio=document.createElement('input')
+		radio.type = 'radio';
+		radio.value = headers[i];
+		radio.name = 'x_axis_column';
+		td.appendChild(document.createTextNode(headers[i]));
+		td.appendChild(radio);
+		trhead.appendChild(td);
+	}
+	document.getElementById('tablex').appendChild(trhead);
+	for(var i=0;i<5;i++){
+		var tr=document.createElement('tr');
+		for(var j=0;j<headers.length;j++){
+			var td=document.createElement('td');
+			td.appendChild(document.createTextNode(sampleData[j][i]));
+			tr.appendChild(td);
+		}
+		document.getElementById('tablex').appendChild(tr);
+	}
+	$('input[name=x_axis_column]').click(function() {
+		console.log($('input[name=x_axis_column]:checked').val());
+	});
+
+
+
+}
+
+//preparing sample data for the user to choose the columns from
+function extractSampleData(completeData,headers){
+	sampleData=[]
+	for (var i=0;i<headers.length;i++){
+		sampleData[i]=[];
+	}
+	for (var i=0;i<headers.length;i++){
+		for(var j=0;j<5;j++){
+			sampleData[i].push(completeData[i][j]);
+		}
+	}
+	console.log(sampleData);
+	sampleDataX(sampleData,headers);
+	sampleDataY(sampleData,headers);
+
+}
+//makes a 2D matrix with the transpose of the CSV file, each column having the same index as its column heading
+function matrixForCompleteData(headers,mat,start){
+	completeData=[]
+	for (var i=0;i<headers.length;i++){
+		completeData[i]=[];
+	}
+	for (var i=start;i<mat.length;i++){
+		for(var j=0;j<headers.length;j++){
+			completeData[j].push(mat[i][0][j]);
+		}
+	}
+	console.log(completeData);
+	extractSampleData(completeData,headers);
+
+}
+
 //determines headers for columns
 function determineHeaders(mat){
 	var headers=[]
 	var flag=false;
+	var start=1; //start is variable that will be passed to the function to sort out the columns. start will tell if the existing CSV file has headers or not, therefore, to start the iteration from 0 or 1
 	for (var i=0;i<mat[0][0].length;i++){
 
 		if (i==0){
@@ -22,11 +121,15 @@ function determineHeaders(mat){
 	}
 	//if there are no headers present, make dummy header names
 	if (flag && headers.length!=mat[0][0].length){
+		start=0;
 		for (var i=0;i<mat[0][0].length;i++){
 			headers[i]="Column"+(i+1);
 		}
 	}
 	console.log(headers);
+	matrixForCompleteData(headers,mat,start);
+
+
 
 }
 //using papaparse, parsing the retrieved file