From 9f8bcf4ab21ca5a34d029b0471e84931f1ff5f6e Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Sun, 9 Jun 2019 16:52:38 +0530
Subject: [PATCH 1/7] text field of google sheet link

---
 dist/PublicLab.Grapher.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index d150a9c..e3f2946 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -652,7 +652,7 @@ function () {
   }, {
     key: "drawHTMLView",
     value: function drawHTMLView() {
-      this.element.innerHTML = '<div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id="update_graph">Update Graph</button><button type="button" class="btn btn-primary" id="save_as_image"> Save as image</button><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>';
+      this.element.innerHTML = '<div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id="update_graph">Update Graph</button><button type="button" class="btn btn-primary" id="save_as_image"> Save as image</button><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>';
     }
   }]);
 

From 533f13f51265c394d3dbb5cdc27b0378325b56c3 Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Sun, 9 Jun 2019 18:30:12 +0530
Subject: [PATCH 2/7] Upload Portion design + Basic placements

---
 dist/PublicLab.Grapher.js |  2 +-
 examples/upload_file.css  | 46 +++++++++++++++++++++++++++++----------
 examples/upload_file.html | 17 +++++++++++++--
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index e3f2946..a0592c5 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -652,7 +652,7 @@ function () {
   }, {
     key: "drawHTMLView",
     value: function drawHTMLView() {
-      this.element.innerHTML = '<div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id="update_graph">Update Graph</button><button type="button" class="btn btn-primary" id="save_as_image"> Save as image</button><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>';
+      this.element.innerHTML = '<div class="main_heading_container"><h2 class="main_heading"> Simple Data Grapher</h2><p class="sub_heading">Plot and Export Graphs with CSV data</p></div><div class="heading_container"><ul class="headings"><li class="item-1">Upload CSV Data</li><li class="item-2">Select Columns & Graph Type</li><li class="item-3">Plotted Graph & Export Options</li></ul></div><div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>';
     }
   }]);
 
diff --git a/examples/upload_file.css b/examples/upload_file.css
index f452516..2a75e57 100644
--- a/examples/upload_file.css
+++ b/examples/upload_file.css
@@ -1,7 +1,7 @@
 .main_container{
     margin:0 auto;
     width: 50%;
-    margin-top: 300px;
+    margin-top: 100px;
     height: 600px;
     display: flex;
     flex-direction: column;
@@ -62,19 +62,19 @@
     width: 350px;
   }
  .carousel-indicators{
- top: 200px;
+ top: 30px;
   justify-content:space-around;
   margin:0;
   display: flex;
   height: 20px;
 }
 .tables{
-  margin-top: 300px;
+  margin-top: 100px;
   text-align: center;
 
 }
 .graph{
-  margin-top: 300px;
+  margin-top: 100px;
 }
 #canvas_container{
   width: 50%;
@@ -89,12 +89,6 @@ ol.carousel-indicators li{
   cursor: pointer;
   background: #cccccc;
 }
-.carousel_headings{
-    justify-content:space-around;
-    margin:0;
-    display: flex;
-    height: 20px;
-}
 .toggle-handle{
   background: #f2f2f2;
   width: 100px;
@@ -140,7 +134,8 @@ ol.carousel-indicators li{
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
-  margin-bottom: -160px;
+  list-style: none;
+  /* margin-bottom: -160px; */
 }
 .check-inputs{
   margin-left: 10px;
@@ -152,4 +147,33 @@ ol.carousel-indicators li{
 .csv_string{
   height: 100px;
   width: 350px;
+}
+.main_heading{
+  font-family: 'Ubuntu Condensed';
+  text-align: center;
+  color: #001a66;
+  font-size: 40px;
+}
+.sub_heading{
+  font-family: 'Ubuntu Condensed';
+  text-align: center;
+  color: #525357;
+  font-size: 18px;
+  padding-top: 5px;
+}
+.main_heading_container{
+  margin-top: 40px;
+}
+.headings li{
+  font-family: 'Ubuntu Condensed';
+  font-size: 20px;
+}
+.heading_container{
+  margin-top:80px;
+}
+.item-1{
+  margin-left: 20px;
+}
+.item-2{
+  margin-left: 70px;
 }
\ No newline at end of file
diff --git a/examples/upload_file.html b/examples/upload_file.html
index 0a38f39..3627451 100644
--- a/examples/upload_file.html
+++ b/examples/upload_file.html
@@ -21,6 +21,17 @@
 
 </head>
 <body>
+	<div class="main_heading_container">
+		<h2 class="main_heading"> Simple Data Grapher</h2>
+		<p class="sub_heading">Plot and Export Graphs with CSV data</p>
+	</div>
+	<div class="heading_container"> 
+		<ul class="headings">
+			<li class="item-1">Upload CSV Data</li>
+			<li class="item-2">Select Columns & Graph Type</li>
+			<li class="item-3">Plotted Graph & Export Options</li>
+		</ul>
+	</div>
 	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
 		<div class="indicators"> 
 			<ol class="carousel-indicators">
@@ -47,6 +58,10 @@ <h6 class="or"><span>OR</span></h6>
 					<div class="container_csv_string">
 						<textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea>
 					</div>
+					<h6 class="or"><span>OR</span></h6>
+					<div class="container_google_sheet">
+						<input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" >
+					</div>
 					
 					<div class="upload_button">
 						<button type="button" class="btn btn-primary" id="upload" >Upload CSV</button>
@@ -80,8 +95,6 @@ <h6 class="or"><span>OR</span></h6>
 			</div>
 			<div class="carousel-item graph">
 				<div class="feature_buttons">
-					<button type="button" class="btn btn-primary" id="update_graph">Update Graph</button>
-					<button type="button" class="btn btn-primary" id="save_as_image"> Save as image</button>
 					<button type="button" class="btn btn-primary" id="add_graph"> Add Graph</button>
 				</div>
 				<div id="canvas_container">

From 047ede36b553bd2e742ae72ff076910c90b25488 Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Sun, 9 Jun 2019 19:39:50 +0530
Subject: [PATCH 3/7] little fixes

---
 dist/PublicLab.Grapher.js | 10 +---------
 src-old/parsing.js        |  4 +---
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index a0592c5..d08ab00 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -375,15 +375,7 @@ function () {
       var ctx = canv.getContext('2d');
       var configuration = this.determineConfig(hash, length, type);
       new Chart(ctx, configuration);
-      $('.' + this.carousalClass).carousel(2); // saveAsImage();
-      // new RangeSliderChart({
-      // 	chartData: config, //The same data you give to Chart.js
-      // 	chartOpts: options, //Your Chart.js options
-      // 	chartType: type, //Which Chart.js chart you want (eg. Lie, Bar, Pie, etc.)
-      // 	chartCTX: ctx, //your canvas context
-      // 	class: 'my-chart-ranger', //Specifies a custom class you want applied to your sliders
-      // 	initial: [3, 10] //Which data points to start the sliders on
-      // })
+      $('.' + this.carousalClass).carousel(2); 
     }
   }, {
     key: "afterSampleData",
diff --git a/src-old/parsing.js b/src-old/parsing.js
index 4a1d112..0a5d04d 100644
--- a/src-old/parsing.js
+++ b/src-old/parsing.js
@@ -434,9 +434,7 @@ $(document).ready(function(){
 	});
 
 });
-document.getElementById("update_graph").onclick = function(e){
-	$('.carousel').carousel(1);
-}
+
 $('.carousel').carousel({
     interval: false
 });

From 59cfc9a1fd19a2dec63735f88eb338ab8f66563f Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Sun, 9 Jun 2019 22:11:03 +0530
Subject: [PATCH 4/7] implementing remaining functions for import

---
 dist/PublicLab.Grapher.js | 110 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 105 insertions(+), 5 deletions(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index d08ab00..fcc512a 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -22,7 +22,7 @@ var CsvParser =
 /*#__PURE__*/
 function () {
   //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 Used in header determination
-  function CsvParser(file, elementId) {
+  function CsvParser(file, elementId, functionParameter) {
     _classCallCheck(this, CsvParser);
 
     _defineProperty(this, 'use strict', void 0);
@@ -43,11 +43,25 @@ function () {
 
     _defineProperty(this, "elementId", null);
 
-    this.csvFile = file;
     this.elementId = elementId;
-    this.parse();
+
+    if (functionParameter=="local"){
+      this.csvFile = file;
+      this.parse();
+    }
+    else if (functionParameter=="csvstring"){
+      this.csvMatrix=file;
+      this.determineHeaders();
+    }
+    else if (functionParameter=="googleSheet"){
+      this.completeCsvMatrix=file[0];
+      this.csvHeaders=file[1];
+      this.extractSampleData();
+
+    }
   }
 
+
   _createClass(CsvParser, [{
     key: "parse",
     value: function parse() {
@@ -235,11 +249,82 @@ function () {
         document.getElementById(this.uploadButtonId).onclick = function (e) {
           console.log("i am uploading");
           console.log(_this);
-          _this.csvParser = new _CsvParser.CsvParser(_this.csvFile, _this.elementId);
+          _this.csvParser = new _CsvParser.CsvParser(_this.csvFile, _this.elementId,"local");
         };
       }
     }
   }, {
+    key: "handleFileSelectstring",
+    value: function handleFileSelectstring(val){
+      var _this = this;
+      this.csvFileString = val;
+      console.log("i am at csv string handler");
+      var csv_string = this.csvFileString.split("\n");
+      var mat=[];
+      for (var i=0;i<csv_string.length;i++){
+        if (csv_string[i]=="" || csv_string[i]==" "){
+          continue;
+        }
+        var dataHash=Papa.parse(csv_string[i],{
+          dynamicTyping: true,
+          comments: true
+        });
+        mat[i]=dataHash['data'][0];
+      }
+      this.csvStringMat=mat;
+      document.getElementById(this.uploadButtonId).onclick = function (e) {
+        console.log("i am uploading");
+        console.log(_this);
+        _this.csvParser = new _CsvParser.CsvParser(_this.csvStringMat, _this.elementId,"csvstring");
+      };
+    }
+
+  },
+  {
+    key: "handleFileSelectGoogleSheet",
+    value: function handleFileSelectGoogleSheet(val){
+      var _this=this;
+      this.csvGoogleSheet=val;
+      $.getJSON(this.csvGoogleSheet, function(data) {
+          var hashSheet=data.feed.entry;
+          var headers_sheet=[];
+          for (var key in hashSheet){
+            var h=hashSheet[key];
+            for (var headKey in h){
+              if (headKey.slice(0,4)=="gsx$"){
+                headers_sheet.push(headKey);
+              }
+            }
+            break;
+          }
+          var matrixComplete=[];
+          for (var i=0;i<headers_sheet.length;i++){
+            matrixComplete[i]=[];
+          }
+          for (var i=0;i<headers_sheet.length;i++){
+            var j=0;
+            for (var key in hashSheet){
+              matrixComplete[i].push(hashSheet[key][headers_sheet[i]]["$t"]);
+              j++;
+            }
+          }
+          for (var i=0;i<headers_sheet.length;i++){
+            headers_sheet[i]=headers_sheet[i].slice(4,headers_sheet[i].length);
+          }
+          var totaldata=[headers_sheet,matrixComplete];
+          this.sheetData=totaldata;
+          console.log(headers_sheet,"hh");
+          document.getElementById(this.uploadButtonId).onclick = function (e) {
+            console.log("i am uploading");
+            console.log(_this);
+            _this.csvParser = new _CsvParser.CsvParser(_this.sheetData, _this.elementId, "googleSheet");
+          };
+          
+        });
+    }
+
+  },
+    {
     key: "determineType",
     value: function determineType(type) {
       console.log("at type");
@@ -589,6 +674,9 @@ function () {
 
     console.log("i am in view");
     this.fileUploadId = elementId + "_csv_file";
+    this.remoteFileUploadId= elementId + "_remote_file";
+    this.csvStringUploadId= elementId + "_csv_string";
+    this.googleSheetUploadId= elementId + "_google_sheet";
     this.dragDropHeadingId = elementId + "_drag_drop_heading";
     this.uploadButtonId = elementId + "_file_upload_button";
     this.addGraphButtonId = elementId + "_add_graph";
@@ -640,11 +728,23 @@ function () {
 
         _this5.handleFileSelectlocal(e);
       });
+      // $("#"+this.remoteFileUploadId).on('change',function(){
+      //   _this5.handleFileSelectremote(this.value);
+      // });
+      $("#"+this.csvStringUploadId).on('change',function(){
+        console.log("i am at csv string");
+        _this5.handleFileSelectstring(this.value);
+      });
+      $("#"+this.googleSheetUploadId).on('change',function(){
+        console.log("i am at csv string");
+        _this5.handleFileSelectGoogleSheet(this.value);
+      });
+
     }
   }, {
     key: "drawHTMLView",
     value: function drawHTMLView() {
-      this.element.innerHTML = '<div class="main_heading_container"><h2 class="main_heading"> Simple Data Grapher</h2><p class="sub_heading">Plot and Export Graphs with CSV data</p></div><div class="heading_container"><ul class="headings"><li class="item-1">Upload CSV Data</li><li class="item-2">Select Columns & Graph Type</li><li class="item-3">Plotted Graph & Export Options</li></ul></div><div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>';
+      this.element.innerHTML = '<div class="main_heading_container"><h2 class="main_heading"> Simple Data Grapher</h2><p class="sub_heading">Plot and Export Graphs with CSV data</p></div><div class="heading_container"><ul class="headings"><li class="item-1">Upload CSV Data</li><li class="item-2">Select Columns & Graph Type</li><li class="item-3">Plotted Graph & Export Options</li></ul></div><div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" id=' + this.elementId + "_remote_file" + ' ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" id=' + this.elementId + "_csv_string" + ' placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" id=' + this.elementId + "_google_sheet" + ' placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button></div><div id=' + this.canvasContinerId + ' ></div></div></div></div>';
     }
   }]);
 

From 8869b4d58a2a673c8c6c15787946e93360067641 Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Mon, 10 Jun 2019 00:28:43 +0530
Subject: [PATCH 5/7] some more fixes

---
 dist/PublicLab.Grapher.js | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index fcc512a..435e406 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -44,19 +44,20 @@ function () {
     _defineProperty(this, "elementId", null);
 
     this.elementId = elementId;
+    console.log(functionParameter);
 
     if (functionParameter=="local"){
       this.csvFile = file;
-      this.parse();
+      this.parse(functionParameter);
     }
     else if (functionParameter=="csvstring"){
       this.csvMatrix=file;
-      this.determineHeaders();
+      this.startFileProcessing(functionParameter);
     }
     else if (functionParameter=="googleSheet"){
       this.completeCsvMatrix=file[0];
       this.csvHeaders=file[1];
-      this.extractSampleData();
+      this.startFileProcessing(functionParameter);
 
     }
   }
@@ -64,7 +65,7 @@ function () {
 
   _createClass(CsvParser, [{
     key: "parse",
-    value: function parse() {
+    value: function parse(functionParameter) {
       var _this = this;
 
       var count = 0;
@@ -78,16 +79,24 @@ function () {
         },
         complete: function complete() {
           //calling a function to determine headers for columns
-          _this.startFileProcessing();
+          $('.' + this.carousalClass).carousel(1);
+          _this.startFileProcessing(functionParameter);
         }
       });
     }
   }, {
     key: "startFileProcessing",
-    value: function startFileProcessing() {
-      this.determineHeaders();
-      this.matrixForCompleteData();
-      this.extractSampleData();
+    value: function startFileProcessing(functionParameter) {
+      if (functionParameter==="local" || functionParameter=="csvstring"){
+        console.log(functionParameter,"wtf?");
+        this.determineHeaders();
+        this.matrixForCompleteData();
+        this.extractSampleData();
+        
+      }
+      else if (functionParameter="googleSheet"){
+        this.extractSampleData();
+      }
 
       _SimpleDataGrapher.SimpleDataGrapher.elementIdSimpleDataGraphInstanceMap[this.elementId].view.continueViewManipulation();
     } //preparing sample data for the user to choose the columns from
@@ -95,6 +104,10 @@ function () {
   }, {
     key: "extractSampleData",
     value: function extractSampleData() {
+      
+      for (var i=0;i<this.csvHeaders.length;i++){
+        this.csvSampleData[i]=[];
+      }
       var maxval = 5;
 
       if (this.completeCsvMatrix.length[0] < 5) {
@@ -167,7 +180,6 @@ function () {
       }
     }
   }]);
-
   return CsvParser;
 }();
 
@@ -499,6 +511,7 @@ function () {
   }, {
     key: "graphMenu",
     value: function graphMenu() {
+      $('.' + this.carousalClass).carousel(1); 
       console.log("at menu");
       document.getElementById(this.graphMenuId).innerHTML = "";
       var bar = ["Bar", "Horizontal", "Vertical"];

From c26f650f7a2d82b84c8776517f267e0e9a2ef3df Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Mon, 10 Jun 2019 00:28:59 +0530
Subject: [PATCH 6/7] .

---
 dist/PublicLab.Grapher.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index 435e406..9b01ad0 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -88,7 +88,6 @@ function () {
     key: "startFileProcessing",
     value: function startFileProcessing(functionParameter) {
       if (functionParameter==="local" || functionParameter=="csvstring"){
-        console.log(functionParameter,"wtf?");
         this.determineHeaders();
         this.matrixForCompleteData();
         this.extractSampleData();

From dc7a6ba732f0046026e0002d65c8f8c5bed934de Mon Sep 17 00:00:00 2001
From: IshaGupta18 <ishagupta1828@gmail.com>
Date: Tue, 11 Jun 2019 10:12:53 +0530
Subject: [PATCH 7/7] just some changes

---
 dist/PublicLab.Grapher.js | 88 ++++++++++++++++++++++++---------------
 examples/upload_file.html |  7 +++-
 2 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/dist/PublicLab.Grapher.js b/dist/PublicLab.Grapher.js
index 9b01ad0..cc8ad80 100644
--- a/dist/PublicLab.Grapher.js
+++ b/dist/PublicLab.Grapher.js
@@ -52,12 +52,12 @@ function () {
     }
     else if (functionParameter=="csvstring"){
       this.csvMatrix=file;
-      this.startFileProcessing(functionParameter);
+      this.parse(functionParameter);
     }
     else if (functionParameter=="googleSheet"){
       this.completeCsvMatrix=file[0];
       this.csvHeaders=file[1];
-      this.startFileProcessing(functionParameter);
+      this.parse(functionParameter);
 
     }
   }
@@ -66,27 +66,33 @@ function () {
   _createClass(CsvParser, [{
     key: "parse",
     value: function parse(functionParameter) {
+      console.log("i am in parsing",functionParameter);
       var _this = this;
-
-      var count = 0;
-      Papa.parse(this.csvFile, {
-        download: true,
-        dynamicTyping: true,
-        comments: true,
-        step: function step(row) {
-          _this.csvMatrix[count] = row.data[0];
-          count += 1;
-        },
-        complete: function complete() {
-          //calling a function to determine headers for columns
-          $('.' + this.carousalClass).carousel(1);
-          _this.startFileProcessing(functionParameter);
-        }
-      });
+      if (functionParameter=="local"){
+        var count = 0;
+        Papa.parse(this.csvFile, {
+          download: true,
+          dynamicTyping: true,
+          comments: true,
+          step: function step(row) {
+            _this.csvMatrix[count] = row.data[0];
+            count += 1;
+          },
+          complete: function complete() {
+            //calling a function to determine headers for columns
+            $('.' + this.carousalClass).carousel(1);
+            _this.startFileProcessing(functionParameter);
+          }
+        });
+      }
+      else {
+        _this.startFileProcessing(functionParameter);
+      }
     }
   }, {
     key: "startFileProcessing",
     value: function startFileProcessing(functionParameter) {
+      console.log("I am in file processing",functionParameter);
       if (functionParameter==="local" || functionParameter=="csvstring"){
         this.determineHeaders();
         this.matrixForCompleteData();
@@ -96,14 +102,14 @@ function () {
       else if (functionParameter="googleSheet"){
         this.extractSampleData();
       }
-
+      console.log("I am about to go to view");
       _SimpleDataGrapher.SimpleDataGrapher.elementIdSimpleDataGraphInstanceMap[this.elementId].view.continueViewManipulation();
     } //preparing sample data for the user to choose the columns from
 
   }, {
     key: "extractSampleData",
     value: function extractSampleData() {
-      
+      console.log("i am in extraction of sample");
       for (var i=0;i<this.csvHeaders.length;i++){
         this.csvSampleData[i]=[];
       }
@@ -139,6 +145,7 @@ function () {
   }, {
     key: "matrixForCompleteData",
     value: function matrixForCompleteData() {
+      console.log("I am in complete data");
       for (var i = 0; i < this.csvHeaders.length; i++) {
         this.completeCsvMatrix[i] = [];
       }
@@ -152,6 +159,7 @@ function () {
   }, {
     key: "determineHeaders",
     value: function determineHeaders() {
+      console.log("i am in headers");
       var flag = false;
 
       for (var i = 0; i < this.csvMatrix[0].length; i++) {
@@ -269,7 +277,7 @@ function () {
     value: function handleFileSelectstring(val){
       var _this = this;
       this.csvFileString = val;
-      console.log("i am at csv string handler");
+      console.log("i am at csv string handler",this);
       var csv_string = this.csvFileString.split("\n");
       var mat=[];
       for (var i=0;i<csv_string.length;i++){
@@ -282,11 +290,12 @@ function () {
         });
         mat[i]=dataHash['data'][0];
       }
-      this.csvStringMat=mat;
+      this.csvFile=mat;
+      console.log(this.csvFile);
       document.getElementById(this.uploadButtonId).onclick = function (e) {
         console.log("i am uploading");
         console.log(_this);
-        _this.csvParser = new _CsvParser.CsvParser(_this.csvStringMat, _this.elementId,"csvstring");
+        _this.csvParser = new _CsvParser.CsvParser(_this.csvFile, _this.elementId,"csvstring");
       };
     }
 
@@ -296,9 +305,11 @@ function () {
     value: function handleFileSelectGoogleSheet(val){
       var _this=this;
       this.csvGoogleSheet=val;
+      var headers_sheet=[];
+      var matrixComplete=[];
       $.getJSON(this.csvGoogleSheet, function(data) {
           var hashSheet=data.feed.entry;
-          var headers_sheet=[];
+          
           for (var key in hashSheet){
             var h=hashSheet[key];
             for (var headKey in h){
@@ -308,7 +319,7 @@ function () {
             }
             break;
           }
-          var matrixComplete=[];
+          
           for (var i=0;i<headers_sheet.length;i++){
             matrixComplete[i]=[];
           }
@@ -322,16 +333,18 @@ function () {
           for (var i=0;i<headers_sheet.length;i++){
             headers_sheet[i]=headers_sheet[i].slice(4,headers_sheet[i].length);
           }
-          var totaldata=[headers_sheet,matrixComplete];
-          this.sheetData=totaldata;
+          // var totaldata=[headers_sheet,matrixComplete];
+          // this.sheetData=totaldata;
           console.log(headers_sheet,"hh");
-          document.getElementById(this.uploadButtonId).onclick = function (e) {
-            console.log("i am uploading");
-            console.log(_this);
-            _this.csvParser = new _CsvParser.CsvParser(_this.sheetData, _this.elementId, "googleSheet");
-          };
+          
           
         });
+        this.sheetData=[headers_sheet,matrixComplete];
+        document.getElementById(this.uploadButtonId).onclick = function (e) {
+          console.log("i am uploading");
+          console.log(_this);
+          _this.csvParser = new _CsvParser.CsvParser(_this.sheetData, _this.elementId, "googleSheet");
+        };  
     }
 
   },
@@ -592,6 +605,7 @@ function () {
     key: "showSampleDataXandY",
     value: function showSampleDataXandY() {
       var _this3 = this;
+      console.log(this,"sample data");
 
       console.log("at sampleDataXandY");
 
@@ -614,7 +628,7 @@ function () {
   }, {
     key: "continueViewManipulation",
     value: function continueViewManipulation() {
-      console.log(" i am back in view manipulation");
+      console.log(" i am back in view manipulation",this);
       this.showSampleDataXandY(); // this.showSampleDataXandY(this.csvParser.csvSampleData, this.csvParser.csvHeaders, this.csvParser.csvValidForYAxis, this.csvParser.csvSampleData);
       // sampleDataXandY(this.csvSampleData,this.csvHeaders,this.csvValidForYAxis,this.completeCsvMatrix);
       // matrixForCompleteData(headers,this.csvMatrix,start);
@@ -634,6 +648,12 @@ function () {
 
     _defineProperty(this, "fileUploadId", null);
 
+    _defineProperty(this, "remoteFileUploadId", null);
+
+    _defineProperty(this, "googleSheetUploadId", null);
+
+    _defineProperty(this, "csvStringUploadId", null);
+
     _defineProperty(this, "csvFile", null);
 
     _defineProperty(this, "dragDropHeadingId", null);
@@ -748,7 +768,7 @@ function () {
         _this5.handleFileSelectstring(this.value);
       });
       $("#"+this.googleSheetUploadId).on('change',function(){
-        console.log("i am at csv string");
+        console.log("i am at google sheet",this.value);
         _this5.handleFileSelectGoogleSheet(this.value);
       });
 
diff --git a/examples/upload_file.html b/examples/upload_file.html
index 3627451..258226f 100644
--- a/examples/upload_file.html
+++ b/examples/upload_file.html
@@ -60,7 +60,12 @@ <h6 class="or"><span>OR</span></h6>
 					</div>
 					<h6 class="or"><span>OR</span></h6>
 					<div class="container_google_sheet">
-						<input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" >
+						<!-- <div>
+							<p> published sheet</p>
+						</div>
+						<div> -->
+							<input type="text" class="google_sheet text_field" placeholder="Link of published Google Sheet" >
+						<!-- </div> -->
 					</div>
 					
 					<div class="upload_button">