Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Plotting Graphs using Chart.js #18

Merged
merged 9 commits into from
May 14, 2019
Merged

Plotting Graphs using Chart.js #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cfa1385
Sample data generation and table display
IshaGupta18 May 9, 2019
108c2ef
emptying tables
IshaGupta18 May 9, 2019
06ba0f8
Plotting graph usingchart.js
IshaGupta18 May 10, 2019
8538bad
checking file type through drag and drop and displaying alert on inva…
IshaGupta18 May 11, 2019
29f2ba3
removing inline function calling
IshaGupta18 May 11, 2019
e08e891
little refactoring
IshaGupta18 May 12, 2019
4ab118b
showing checkboxes against valid columns only
IshaGupta18 May 12, 2019
735abb1
Adding graphing menu for different graph types
IshaGupta18 May 12, 2019
eb85494
adding colors to graph
IshaGupta18 May 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions examples/upload_file.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
<link rel="stylesheet" href="upload_file.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
<script src="../src/parsing.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
</head>
<body>
<div class="main_container">
Expand All @@ -21,11 +23,25 @@
</div>
<h6 class="or"><span>OR</span></h2>
<div class="container_remote_link">
<input type="text" class="remote_file" placeholder="url of remote file" onchange="handleFileSelectremote(this.value);">
<input type="text" class="remote_file" placeholder="url of remote file" >
</div>
<div class="upload_button">
<button type="button" class="btn btn-primary">Upload CSV</button>
<button type="button" class="btn btn-primary" id="upload" >Upload CSV</button>
</div>

</div>
<div>
<table id="tablex" border="1"></table>
</div>
<div>
<table id="tabley" border="1"></table>
</div>

<div style="width:75%;" id="canvas_container">
<canvas id="canvas"></canvas>
</div>
<div>
<table id="graph_menu" border="1"></table>
</div>

</body>
Expand Down
268 changes: 258 additions & 10 deletions src/parsing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,253 @@
function determineType(type){
if (type=="Basic" || type=="Stepped" || type=="Point"){
console.log("wtf");
return 'line';
}
else if (type=="Horizontal"){
console.log("did i enter");
return 'horizontalBar';
}
else if (type=="Vertical"){

return 'bar';
}
else{
return type.toLowerCase();
}
}
function determineConfig(type){
if (type=="Basic"){
return {'fill': false};
}
else if (type=="Stepped"){
return {'steppedLine': true, 'fill': false};
}
else if (type=="Point"){
return {'showLine': false, 'pointRadius': 10};
}
else{
return {};
}
}
function graphMenu(){
var bar=["Bar","Horizontal","Vertical"];
var line=["Line","Basic","Stepped","Point"];
var disc=["Disc","Pie","Doughnut","Radar"];
var types=[bar,line,disc];
for (var i=0;i<3;i++){
var tr=document.createElement('tr');
var td_head=document.createElement('td');
td_head.className=types[i][0];
td_head.appendChild(document.createTextNode(types[i][0]));
tr.appendChild(td_head);
for (var j=1;j<types[i].length;j++){
var td=document.createElement('td');
var radio=document.createElement('input')
radio.type = 'radio';
radio.value = types[i][j];
td.appendChild(document.createTextNode(types[i][j]));
radio.name = 'types';
td.appendChild(radio);
tr.appendChild(td);
}
document.getElementById("graph_menu").appendChild(tr);
}
}
function colorGenerator(i,tb,type,count){
var colors=['rgba(255, 77, 210, 0.5)','rgba(0, 204, 255, 0.5)','rgba(128, 0, 255, 0.5)','rgba(255, 77, 77, 0.5)','rgba(0, 179, 0, 0.5)','rgba(255, 255, 0, 0.5)','rgba(255, 0, 102, 0.5)','rgba(0, 115, 230, 0.5)'];
var bordercolors=['rgb(255, 0, 191)','rgb(0, 184, 230)','rgb(115, 0, 230)','rgb(255, 51, 51)','rgb(0, 153, 0)','rgb(230, 230, 0)','rgb(230, 0, 92)','rgb(0, 102, 204)'];
var length=8;
if (type=="Pie" || type=="Doughnut"){
var colorSet=[];
var borderColorSet=[];
for (var j=0;j<count;j++){
colorSet.push(colors[j%length]);
borderColorSet.push(bordercolors[j%length]);
}
if (tb=="bg"){
return colorSet;
}
else{
return borderColorSet;
}
}
else{
if (tb=="bg"){
return colors[i%length];
}
else{
return bordercolors[i%length];
}
}
}
function scales(hash){
var scales= {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: hash['labels'][0]
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
return scales;
}
function plotGraph(hash,length,type){
var config = {};
config['type']=determineType(type);
var data={};
data['labels']=hash['x_axis_labels'];
var datasets=[];
for (var i=0;i<length;i++){
var h=determineConfig(type);
h['backgroundColor']=colorGenerator(i,"bg",type,hash['y_axis_values'+i].length);
h['borderColor']=colorGenerator(i,"bo",type,hash['y_axis_values'+i].length);
h['borderWidth']=1;
h['label']=hash['labels'][1][i];
h['data']=hash['y_axis_values'+i];
datasets.push(h);
}
var options={'responsive':true, 'maintainAspectRatio': true};
options['scales']=scales(hash);
config['options']=options;
data['datasets']=datasets;
config['data']=data;
document.getElementById('canvas').remove();
var canv=document.createElement('canvas');
canv.id="canvas";
document.getElementById('canvas_container').appendChild(canv);
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
}
function afterSampleData(sampleData,headers){
document.getElementById("upload").onclick = function(e){
e.preventDefault();
var hash={};
var ix=$('input[name=x_axis_column]:checked').val();
hash["x_axis_labels"]=sampleData[ix];
var columns = new Array();
var y_axis_names = new Array();
$("input:checkbox[name=y_axis_column]:checked").each(function(){
columns.push($(this).val());
});
for(var i=0;i<columns.length;i++){
hash["y_axis_values"+(i)]=sampleData[columns[i]];
y_axis_names.push(headers[columns[i]]);
}
var labels=[headers[ix],y_axis_names];
hash["labels"]=labels;
var type=$('input[name=types]:checked').val()
console.log(type);
console.log(hash);
plotGraph(hash,columns.length,type);
};

}
function tableGenerator(sampleData,headers,name,tableName,typeOfInput,validValues){
document.getElementById(tableName).innerHTML="";
var trhead=document.createElement('tr');
for (var i=0;i<headers.length;i++){
var td=document.createElement('td');
td.appendChild(document.createTextNode(headers[i]));
for (var j=0;j<validValues.length;j++){
if (validValues[j]==headers[i]){
var checkbox=document.createElement('input')
checkbox.type = typeOfInput;
checkbox.value = i;
checkbox.name = name;
td.appendChild(checkbox);}
}
trhead.appendChild(td);
}
document.getElementById(tableName).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(tableName).appendChild(tr);
}
afterSampleData(sampleData,headers);


}
function sampleDataXandY(sampleData,headers,validForYAxis){
tableGenerator(sampleData,headers,'x_axis_column','tablex','radio',headers);
tableGenerator(sampleData,headers,'y_axis_column','tabley','checkbox',validForYAxis);
graphMenu();

}

//preparing sample data for the user to choose the columns from
function extractSampleData(completeData,headers){
var sampleData=[];
var validForYAxis=[];
for (var i=0;i<headers.length;i++){
sampleData[i]=[];
}
for (var i=0;i<headers.length;i++){
var counter=0;
var bool=false;
for(var j=0;j<completeData[i].length;j++){
if (counter>=5){
break;
}
else if (completeData[i][j]!=null || completeData[i][j]!=undefined){
if (typeof(completeData[i][j])=='number'){
bool=true;
}
counter+=1;
sampleData[i].push(completeData[i][j]);}
}
if (bool){
validForYAxis.push(headers[i]);
}
}
console.log(sampleData);
console.log(validForYAxis);
sampleDataXandY(sampleData,headers,validForYAxis);

}
//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){
var 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][j]);
}
}
console.log(completeData);
extractSampleData(completeData,headers);

}

//determines headers for columns
function determineHeaders(mat){
var headers=[]
var flag=false;
for (var i=0;i<mat[0][0].length;i++){
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].length;i++){

if (i==0){
headers[i]=mat[0][0][i];
headers[i]=mat[0][i];
}
else{
if (typeof(mat[0][0][i])==typeof(mat[0][0][i-1]) && typeof(mat[0][0][i])!='object'){
headers[i]=mat[0][0][i];
if (typeof(mat[0][i])==typeof(mat[0][i-1]) && typeof(mat[0][i])!='object'){
headers[i]=mat[0][i];
}
else if(typeof(mat[0][0][i])=='object'){
else if(typeof(mat[0][i])=='object'){
headers[i]="Column"+(i+1);
}
else{
Expand All @@ -21,12 +257,16 @@ function determineHeaders(mat){
}
}
//if there are no headers present, make dummy header names
if (flag && headers.length!=mat[0][0].length){
for (var i=0;i<mat[0][0].length;i++){
if (flag && headers.length!=mat[0].length){
start=0;
for (var i=0;i<mat[0].length;i++){
headers[i]="Column"+(i+1);
}
}
console.log(headers);
matrixForCompleteData(headers,mat,start);



}
//using papaparse, parsing the retrieved file
Expand All @@ -38,7 +278,7 @@ function parse(file){
dynamicTyping: true,
comments: true,
step: function(row) {
mat[count]=row.data;
mat[count]=row.data[0];
count+=1;
},
complete: function() {
Expand All @@ -53,7 +293,11 @@ function parse(file){
//extracts the file uploaded in the field
function handleFileSelectlocal(evt) {
var csv_file_local = evt.target.files[0];
parse(csv_file_local);
if (csv_file_local['name'].split(".")[1]!="csv"){
alert("Invalid file type");
}
else{
parse(csv_file_local);}
}
//reads the input from the text field in which the link of the remote file is included
function handleFileSelectremote(val){
Expand All @@ -63,4 +307,8 @@ function handleFileSelectremote(val){
//this triggers handleFileSelectLocal function whenever a file is uploaded in the field
$(document).ready(function(){
$(".csv_file").change(handleFileSelectlocal);
});
$(".remote_file").on('change',function(){
handleFileSelectremote(this.value);
});
});