Finish creating x-axis of graph

views/dataPage/ingredient.js

@@ -9,7 +9,7 @@ window.ingredientObj = {
             let startDate = new Date();
             startDate.setFullYear(new Date().getFullYear() - 1);
 
-            lineGraph.drawLineGraph(
+            let ingredientGraph = new LineGraph(
                 document.querySelector("#ingredientStrand canvas"),
                 this.formatData(type, ingredient.id),
                 "Quantity",

views/shared/graphs.js

@@ -1,22 +1,13 @@
-let lineGraph = {
-    context: {},
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0,
-    verticalMultiplier: 0,
-    horizontalMultiplier: 0,
-
-    drawLineGraph: function(canvas, data, yName, xName, xData){
+class LineGraph{
+    constructor(canvas, data, yName, xName, xData){
         canvas.height = canvas.clientHeight;
         canvas.width = canvas.clientWidth;
 
         this.context = canvas.getContext("2d");
-
         this.left = canvas.clientWidth - (canvas.clientWidth * 0.9);
         this.right = canvas.clientWidth * 0.9;
-        this.bottom = canvas.clientHeight * 0.9;
         this.top = canvas.clientHeight - (canvas.clientHeight * 0.9);
+        this.bottom = canvas.clientHeight * 0.9;
 
         let max = data[0];
         for(let point of data){
@@ -26,12 +17,16 @@ let lineGraph = {
         this.verticalMultiplier = (this.bottom - this.top) / max;
         this.horizontalMultiplier = (this.right - this.left) / data.length;
 
+        console.log(data);
+
+        xData.dataLength = data.length;
+
+        this.drawYAxis(yName, max);
         this.drawXAxis(xName, xData);
-        this.drawYAxis(yName, max)
         this.addLine(data);
-    },
+    }
 
-    addLine: function(data){
+    addLine(data){
         let redRand = Math.floor(Math.random() * 200);
         let greenRand = Math.floor(Math.random() * 200);
         let blueRand = Math.floor(Math.random() * 200);
@@ -44,12 +39,13 @@ let lineGraph = {
             this.context.strokeStyle = `rgb(${redRand}, ${greenRand}, ${blueRand})`;
             this.context.stroke();
         }
-    },
+    }
 
-    drawXAxis: function(xName, xData){
+    drawXAxis(xName, xData){
         this.context.beginPath();
         this.context.moveTo(this.left, this.bottom);
         this.context.lineTo(this.right, this.bottom);
+        this.context.lineWidth = 2;
         this.context.stroke();
 
         this.context.font = "25px Arial";
@@ -61,32 +57,47 @@ let lineGraph = {
 
         if(xData.type = "date"){
             let diff = Math.abs(Math.floor((Date.UTC(xData.start.getFullYear(), xData.start.getMonth(), xData.start.getDate()) - Date.UTC(xData.end.getFullYear(), xData.end.getMonth(), xData.end.getDate())) / (1000 * 60 * 60 * 24)));
-            let horizontalIncrement = (this.right - this.left) /10
-            let horizontalOffset = 0
+            // let horizontalIncrement = (this.right - this.left) /10
+            // let horizontalOffset = 0
             let showDate = xData.start;
 
-            do{
-                this.context.fillText(showDate.toLocaleDateString("en-US", {month: "short", day: "numeric", year: "2-digit"}), this.left + horizontalOffset - 20, this.bottom + 10);
+            for(let i = 0; i < xData.dataLength; i += Math.floor(xData.dataLength / 10)){
+                this.context.fillText(showDate.toLocaleDateString("en-US", {month: "short", day: "numeric", year: "2-digit"}), this.left + (this.horizontalMultiplier * i) - 20, this.bottom + 15);
 
-                this.context.beginPath();
-                this.context.moveTo(this.left + horizontalOffset, this.bottom);
-                this.context.lineTo(this.left + horizontalOffset, this.top);
+                this.context.beginPath()
+                this.context.moveTo(this.left + (this.horizontalMultiplier * i), this.bottom);
+                this.context.lineTo(this.left + (this.horizontalMultiplier * i), this.top);
                 this.context.strokeStyle = "#a5a5a5";
                 this.context.stroke();
 
-                showDate.setDate(showDate.getDate() + (Math.abs(diff / 10)));
-                horizontalOffset += horizontalIncrement;
-            }while(horizontalOffset < (this.right - this.left));
+                showDate.setDate(showDate.getDate() + Math.abs(diff / 10));
+
+                console.log(i);
+            }
+
+            // do{
+            //     this.context.fillText(showDate.toLocaleDateString("en-US", {month: "short", day: "numeric", year: "2-digit"}), this.left + horizontalOffset - 20, this.bottom + 10);
+
+            //     this.context.beginPath();
+            //     this.context.moveTo(this.left + horizontalOffset, this.bottom);
+            //     this.context.lineTo(this.left + horizontalOffset, this.top);
+            //     this.context.strokeStyle = "#a5a5a5";
+            //     this.context.stroke();
+
+            //     showDate.setDate(showDate.getDate() + (Math.abs(diff / 10)));
+            //     horizontalOffset += horizontalIncrement;
+            // }while(horizontalOffset < (this.right - this.left));
         }
 
+        this.context.strokeStyle = "black";
         this.context.setLineDash([]);
-    },
+    }
 
-    drawYAxis: function(yName, max){
+    drawYAxis(yName, max){
         this.context.beginPath();
         this.context.moveTo(this.left, this.top);
         this.context.lineTo(this.left, this.bottom);
-        this.context.lineWidth = 3;
+        this.context.lineWidth = 2;
         this.context.stroke();
 
         this.context.font = "25px Arial";
@@ -112,6 +123,7 @@ let lineGraph = {
             axisNum += max / 10;
         }while(verticalOffset <= (this.bottom - this.top));
 
+        this.context.strokeStyle = "black";
         this.context.setLineDash([]);
     }
 }