diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4ff5eda..c0fec3c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
+import { MaterialModule } from './material.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HeaderComponent } from './header/header.component';
@@ -31,6 +32,7 @@ import { HttpErrorInterceptor } from './http-error.interceptor';
   ],
   imports: [
     BrowserModule,
+    MaterialModule,
     BrowserAnimationsModule,
     HttpClientModule,
     RouterModule.forRoot([
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
new file mode 100644
index 0000000..4c3728f
--- /dev/null
+++ b/src/app/material.module.ts
@@ -0,0 +1,28 @@
+// material.module.ts
+
+import { NgModule } from '@angular/core';
+import { MatDatepickerModule,
+        MatNativeDateModule,
+        MatFormFieldModule,
+        MatInputModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  imports: [
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatNativeDateModule,
+    MatInputModule,
+    BrowserAnimationsModule
+  ],
+  exports: [
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatNativeDateModule,
+    MatInputModule,
+    BrowserAnimationsModule
+  ],
+  providers: [ MatDatepickerModule ],
+})
+
+export class MaterialModule {}
\ No newline at end of file
diff --git a/src/app/services/visualize.service.ts b/src/app/services/visualize.service.ts
index de87c77..d3bc0cf 100644
--- a/src/app/services/visualize.service.ts
+++ b/src/app/services/visualize.service.ts
@@ -39,6 +39,10 @@ export class VisualizeService {
             ticks: {
               beginAtZero: true
             }
+          }],
+          xAxes: [{
+            type: 'time',
+            distribution: 'linear'
           }]
         }
       }
@@ -46,10 +50,11 @@ export class VisualizeService {
     return chart;
   }
 
-  getDataForVis(token, time, func, gens, data): Observable<Object> {
+  getDataForVis(token, timeStart, timeEnd, func, gens, data): Observable<Object> {
     const body = {
       'time': {
-        'start': time,
+        'start': timeStart,
+        'end': timeEnd,
         'aggregator': func
       },
       'filters': [
diff --git a/src/app/visualize-all/visualize-all.component.css b/src/app/visualize-all/visualize-all.component.css
index fe2ff58..85d9c66 100644
--- a/src/app/visualize-all/visualize-all.component.css
+++ b/src/app/visualize-all/visualize-all.component.css
@@ -4,23 +4,13 @@ select#gen_select {
 }
 
 select#func_select {
-    width: 180px;
+    width: 200px;
     margin: 20px;
 }
 
 select#data_select {
-    width: 180px;
-    margin: 20px;
-}
-
-select#time_type_select {
-    width: 180px;
-    margin: 20px;
-}
-select#time_span_select {
     width: 200px;
-    padding: 20px
-
+    margin: 20px;
 }
 
 p#visMessage {
diff --git a/src/app/visualize-all/visualize-all.component.html b/src/app/visualize-all/visualize-all.component.html
index e3e1113..747e208 100644
--- a/src/app/visualize-all/visualize-all.component.html
+++ b/src/app/visualize-all/visualize-all.component.html
@@ -22,27 +22,24 @@
             <option value="count">Count</option>
             <option value="dev">Deviation</option>
           </select>
-          <!-- <br><br> -->
+          <br>
           <select id="data_select" name="dataSelect">
             <option value="" disabled selected>Select Data</option>
             <option *ngFor="let names of dataNames$" value="{{names}}">{{names}}</option>
           </select>
-          <!-- <br><br> -->
-          <select id="time_type_select" name="timeTypeSelect">
-            <option value="" disabled selected>Select Time Type</option>
-            <option value="year">Years</option>
-            <option value="month">Months</option>
-            <option value="day">Days</option>
-            <option value="hour">Hours</option>
-            <option value="minute">Minutes</option>
-          </select>
-          <br>
+          <br><br>
+            <form style="color:white" action="/action_page.php">
+              Start Time: 
+              <input #start_time type="date" name="exampleStartTime">
+              <br><br>
+              End Time: 
+              <input #end_time type="date" name="exampleEndTime">
+            </form>
+            <br>
           <select id="gen_select" name="generatorSelect" multiple>
-            <option *ngFor="let generator of generators$" value="{{generator.gen_id}},{{generator.gen_name}}">{{generator.gen_name}}</option>
+            <option *ngFor="let generator of generators$" value="{{generator.gen_id}},{{generator.gen_name}}">
+              {{generator.gen_name}}</option>
           </select>
-          <div id="time-span-select">
-            <input #time_span type="number" id="exampleInputTimeSpan" placeholder="Select Time Span">
-          </div>
           <br>
           <a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
           <br>
diff --git a/src/app/visualize-all/visualize-all.component.ts b/src/app/visualize-all/visualize-all.component.ts
index a560ac1..126030e 100644
--- a/src/app/visualize-all/visualize-all.component.ts
+++ b/src/app/visualize-all/visualize-all.component.ts
@@ -9,6 +9,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import 'rxjs/add/operator/map';
 import { $ } from 'protractor';
 import * as moment from 'moment';
+import { MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
 
 @Component({
   selector: 'app-visualize-all',
@@ -23,7 +24,10 @@ export class VisualizeAllComponent implements OnInit {
   public laymanDataVal$: any = null;
   public chart: any = null;
   public signal = false;
+  events: string[] = [];
   @ViewChild('time_span') timeSpan: ElementRef;
+  @ViewChild('start_time') startTime: ElementRef;
+  @ViewChild('end_time') endTime: ElementRef;
 
   constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService,
     private router: Router, private http: HttpClient) { }
@@ -82,23 +86,50 @@ export class VisualizeAllComponent implements OnInit {
       this.signal = true;
     }
 
-    const timeTypeVals = Array.prototype.slice.call(document.querySelectorAll('#time_type_select option:checked'), 0)
-      .map(function (v, i, a) {
-        return v.value;
-      });
-    let timeTypeVal = '';
-    if (timeTypeVals[0] === 'year') {
-      timeTypeVal = 'y-ago';
-    } else if (timeTypeVals[0] === 'month') {
-      timeTypeVal = 'n-ago';
-    } else if (timeTypeVals[0] === 'day') {
-      timeTypeVal = 'd-ago';
-    } else if (timeTypeVals[0] === 'hour') {
-      timeTypeVal = 'h-ago';
-    } else if (timeTypeVals[0] === 'minute') {
-      timeTypeVal = 'm-ago';
+    let startTime = this.startTime.nativeElement.value;
+    let endTime = this.endTime.nativeElement.value;
+
+    let timeStart;
+    let timeEnd;
+    if (startTime === '') {
+      timeStart = 'invalid';
+      this.signal = true;
+    } else if (endTime === '') {
+      timeEnd = 'invalid';
+      this.signal = true;
+    }
+    const startArray = startTime.split('-');
+    const endArray = endTime.split('-');
+    let startNumArray;
+    let endNumArray;
+    if (startArray.length === 3 && endArray.length === 3) {
+      startNumArray = [parseInt(startArray[0], 10), parseInt(startArray[1], 10), parseInt(startArray[2], 10)];
+      endNumArray = [parseInt(endArray[0], 10), parseInt(endArray[1], 10), parseInt(endArray[2], 10)];
+      if (startNumArray[0] === endNumArray[0]) {
+        if (startNumArray[1] === endNumArray[0]) {
+          if (startNumArray[2] < endNumArray[0]) {
+            timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
+            timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
+          } else {
+            timeStart = 'invalid';
+            this.signal = true;
+          }
+        } else if (startNumArray[1] < endNumArray[0]) {
+          timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
+          timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
+        } else {
+          timeStart = 'invalid';
+          this.signal = true;
+        }
+      } else if (startNumArray[0] < endNumArray[0]) {
+        timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
+        timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
+      } else {
+        timeStart = 'invalid';
+        this.signal = true;
+      }
     } else {
-      timeTypeVal = 'invalid';
+      timeStart = 'invalid';
       this.signal = true;
     }
 
@@ -108,15 +139,14 @@ export class VisualizeAllComponent implements OnInit {
       const data = [];
       try {
         // create chart based on user input
-        this.graphData.getDataForVis(jsonToken, this.timeSpan.nativeElement.value
-          + timeTypeVal, funcVal, genVal, dataVal).subscribe((graphData) => {
+        this.graphData.getDataForVis(jsonToken, timeStart, timeEnd, funcVal, genVal, dataVal)
+          .subscribe((graphData) => {
             this.chart$ = graphData;
             let sig;
             let count = 0;
             let realCount;
             for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
-              const time = moment(this.chart$['outputs'][0]['dps'][n][0]).format('MM-DD-YY hh:mm:ss');
-              labels.push(time);
+              labels.push(this.chart$['outputs'][0]['dps'][n][0]);
               if (n === 0) {
                 sig = this.chart$['outputs'][0]['dps'][n][0];
                 count = 1;
@@ -165,28 +195,24 @@ export class VisualizeAllComponent implements OnInit {
     try {
 
       // create example chart
-      this.graphData.getDataForVis(jsonToken, this.timeSpan.nativeElement.value
-        + '1y-ago', 'sum', '1', 'oil.temp').subscribe((graphData) => {
-          this.chart$ = graphData;
-          let count;
-          const meta = Object.values(this.chart$['outputs'][0]['dpsMeta']);
+      this.graphData.getDataForVis(jsonToken, '2019/03/13', '2019/03/14', 'sum', '1', 'oil.temp').subscribe((graphData) => {
+        this.chart$ = graphData;
+        let count;
+        for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
+          labels.push(this.chart$['outputs'][0]['dps'][n][0]);
+          count = n;
+        }
+        for (let c = 0; c < 1; c++) {
+          const genData = [];
           for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
-            const time = moment(this.chart$['outputs'][0]['dps'][n][0]).format('MM-DD-YY hh:mm:ss');
-            labels.push(time);
-            count = n;
+            genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]);
           }
-          for (let c = 0; c < 1; c++) {
-            const genData = [];
-            for (let n = 0; n < (Object.keys(this.chart$['outputs'][0]['dps']).length); n++) {
-              genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]);
-            }
-            data.push(genData);
-          }
-          // console.log(data);
-          this.laymanDataVal$ = 'Example Lube Oil Temperature';
-          this.chart = this.graphData.createChart(labels, data, ['South Garage Generator']);
-          this.unit$ = this.data.getUnits('oil.temp');
-        });
+          data.push(genData);
+        }
+        this.laymanDataVal$ = 'Example Lube Oil Temperature';
+        this.chart = this.graphData.createChart(labels, data, ['South Garage Generator']);
+        this.unit$ = this.data.getUnits('oil.temp');
+      });
 
     } catch (err) {
       return err;