diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8b5a227..e0680b7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -47,6 +47,7 @@ import { VisualizeOneComponent } from './visualize-one/visualize-one.component';
     {path: 'history', component: HistoryComponent},
     {path: 'sign_up', component: SignUpComponent},
     {path: 'visualize-all', component: VisualizeAllComponent},
+    {path: 'visualize-one', component: VisualizeOneComponent},
 
     ]),
 
diff --git a/src/app/generator-search/generator-search.component.html b/src/app/generator-search/generator-search.component.html
index ded4e68..952db49 100644
--- a/src/app/generator-search/generator-search.component.html
+++ b/src/app/generator-search/generator-search.component.html
@@ -8,7 +8,7 @@
                     <br>
                     <a>
                         <a class="text-center"*ngFor="let generator of generators$">
-                            <a class="btn btn-primary" style="color:white" (click)="goToGenerator(generator.gen_id, generator.org_id)">{{ generator.gen_name }}</a>
+                            <a class="btn btn-primary" style="color:white" (click)="goToGenerator(generator.gen_id, generator.org_id, generator.gen_name)">{{ generator.gen_name }}</a>
                             <p id="genInfo">
                                 zipcode: {{ generator.zip }} <br>
                                 (insert statistics preview here)
diff --git a/src/app/generator-search/generator-search.component.ts b/src/app/generator-search/generator-search.component.ts
index bd247b6..eeb64aa 100644
--- a/src/app/generator-search/generator-search.component.ts
+++ b/src/app/generator-search/generator-search.component.ts
@@ -14,12 +14,13 @@ export class GeneratorSearchComponent implements OnInit {
 
   public generators$: Object;
 
-  goToGenerator(gen_id, org_id) {
+  goToGenerator(gen_id, org_id, gen_name) {
     this.router.navigateByUrl('/statistics');
     // console.log(gen_id);
     // console.log(org_id);
     localStorage.setItem('gen_id', gen_id);
     localStorage.setItem('org_id', org_id);
+    localStorage.setItem('gen_name', gen_name);
   }
 
   ngOnInit() {
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 9f3e5e2..6f1e0a3 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -20,6 +20,8 @@ export class HeaderComponent implements OnInit {
       this.router.navigateByUrl('/generator-search');
       localStorage.removeItem('gen_id');
       localStorage.removeItem('org_id');
+      localStorage.removeItem('gen_name');
+      localStorage.removeItem('data_type');
     } else {
       console.log('You need to log in');
       this.router.navigateByUrl('#');
@@ -31,6 +33,8 @@ export class HeaderComponent implements OnInit {
       this.router.navigateByUrl('/visualize-all');
       localStorage.removeItem('gen_id');
       localStorage.removeItem('org_id');
+      localStorage.removeItem('gen_name');
+      localStorage.removeItem('data_type');
     } else {
       console.log('You need to log in');
       this.router.navigateByUrl('#');
diff --git a/src/app/visualize-one/visualize-one.component.css b/src/app/visualize-one/visualize-one.component.css
index e69de29..3e25b0a 100644
--- a/src/app/visualize-one/visualize-one.component.css
+++ b/src/app/visualize-one/visualize-one.component.css
@@ -0,0 +1,23 @@
+select#gen_select {
+    width: 200px;
+    margin: 20px;
+}
+
+select#func_select {
+    width: 200px;
+    margin: 20px;
+}
+
+select#data_select {
+    width: 200px;
+    margin: 20px;
+}
+
+p#visMessage {
+    color: white;
+}
+
+p#graphInfo {
+    color: grey;
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/src/app/visualize-one/visualize-one.component.html b/src/app/visualize-one/visualize-one.component.html
index 1133196..ecbd83c 100644
--- a/src/app/visualize-one/visualize-one.component.html
+++ b/src/app/visualize-one/visualize-one.component.html
@@ -1,3 +1,52 @@
-<p>
-  visualize-one works!
-</p>
+<div class="container ">
+  <div class="row">
+    <div class="col-md-12 mx-auto mt-4">
+      <h4 class="text-center mb-3">Visualization for {{genName$}}</h4>
+      <h5 class="text-center" *ngIf="!dataSig$">Data Type: {{dataType$}}</h5>
+      <p class="text-center"  *ngIf="dataSig$">{{laymanDataVal$}} Graph</p>
+      <canvas id="canvas">{{chart}}</canvas>
+
+      <p id="graphInfo" class="text-left">
+        Dates: {{startTime$}} - {{endTime$}}<br>
+        Units: {{unit$}}<br>
+        Function: {{function$}}<br>
+      </p>
+      <form id="visToolbar">
+        <h4 class="text-center mb3" style="color:red" *ngIf="signal">Invalid Entry</h4>
+        <div class="text-center mb3" style="background-color: black;">
+          <br>
+          <!-- <br><br> -->
+          <select id="func_select" name="functionSelect">
+            <option value="" disabled selected>Select Function</option>
+            <option value="sum">Summation</option>
+            <option value="min">Minimum</option>
+            <option value="avg">Average</option>
+            <option value="max">Maximum</option>
+            <option value="count">Count</option>
+            <option value="dev">Deviation</option>
+          </select>
+          <br>
+          <div *ngIf="dataSig$">
+            <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>
+          </div>
+          <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><br>
+          <a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
+          <br>
+          <br>
+        </div>
+        <br><br>
+      </form>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/visualize-one/visualize-one.component.ts b/src/app/visualize-one/visualize-one.component.ts
index b52e076..eeed664 100644
--- a/src/app/visualize-one/visualize-one.component.ts
+++ b/src/app/visualize-one/visualize-one.component.ts
@@ -1,4 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { GeneratorService } from '../services/generator.service';
+import { DataService } from '../services/data.service';
+import { VisualizeService } from '../services/visualize.service';
+import { Router } from '@angular/router';
+import { Chart } from 'chart.js';
+import { Injectable } from '@angular/core';
+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-one',
@@ -6,10 +17,204 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./visualize-one.component.css']
 })
 export class VisualizeOneComponent implements OnInit {
+  public generators$: Object;
+  public chart$: Object;
+  public genName$: any = null;
+  public dataType$: any = null;
+  public dataSig$: any = null;
+  public unit$: any = null;
+  public function$: any = null;
+  public startTime$: any = null;
+  public endTime$: any = null;
+  public dataNames$;
+  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() { }
+  constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService,
+    private router: Router, private http: HttpClient) { }
 
+  resetAndRemakeChart() {
+    const genVal = localStorage.getItem('gen_id');
+    const genCount = 1;
+
+    const funcVals = Array.prototype.slice.call(document.querySelectorAll('#func_select option:checked'), 0).map(function (v, i, a) {
+      return v.value;
+    });
+    let funcVal = '';
+    if (funcVals[0] !== '') {
+      funcVal = funcVals[0] + '';
+    } else {
+      funcVal = 'invalid';
+      this.signal = true;
+    }
+
+    const dataType = localStorage.getItem('data_type');
+    let dataVal;
+    if (dataType === null) {
+      const dataVals = Array.prototype.slice.call(document.querySelectorAll('#data_select option:checked'), 0).map(function (v, i, a) {
+        return v.value;
+      });
+      if (dataVals[0] !== null) {
+        this.laymanDataVal$ = dataVal = dataVals[0] + '';
+        dataVal = this.data.convertNames(dataVal, 'metric');
+      } else {
+        dataVal = 'invalid';
+        this.signal = true;
+      }
+    } else {
+      dataVal = dataType;
+    }
+
+    const startTime = this.startTime.nativeElement.value;
+    const 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 years are equal
+        if (startNumArray[1] === endNumArray[1]) { // if months are equal
+          if (startNumArray[2] <= endNumArray[2]) { // if start days are less than or equal
+            timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2] + '-00:00:00';
+            timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2] + '-23:59:59';
+          } else {
+            timeStart = 'invalid';
+            this.signal = true;
+          }
+        } else if (startNumArray[1] < endNumArray[1]) { // if start month is less
+          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]) { // if start year is less
+        timeStart = startArray[0] + '/' + startArray[1] + '/' + startArray[2];
+        timeEnd = endArray[0] + '/' + endArray[1] + '/' + endArray[2];
+      } else {
+        timeStart = 'invalid';
+        this.signal = true;
+      }
+    } else {
+      timeStart = 'invalid';
+      this.signal = true;
+    }
+
+    if (this.signal === false) {
+      const jsonToken = localStorage.getItem('auth_token');
+      const labels = [];
+      const data = [];
+      try {
+        // create chart based on user input
+        this.graphData.getDataForVis(jsonToken, timeStart, timeEnd, funcVal, localStorage.getItem('gen_id'), 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++) {
+              labels.push(this.chart$['outputs'][0]['dps'][n][0]);
+              if (n === 0) {
+                sig = this.chart$['outputs'][0]['dps'][n][0];
+                count = 1;
+              } else if (sig === this.chart$['outputs'][0]['dps'][n][0]) {
+                realCount = count;
+              } else {
+                count++;
+              }
+            }
+            for (let c = 0; c < genCount; 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);
+            }
+            this.chart.destroy();
+            this.chart = this.graphData.createChart(labels, data, [localStorage.getItem('gen_name')]);
+            this.unit$ = this.data.getUnits(dataVal);
+            this.startTime$ = startArray[1] + '/' + startArray[2] + '/' + startArray[0];
+            this.endTime$ = endArray[1] + '/' + endArray[2] + '/' + endArray[0];
+            this.function$ = funcVal;
+          });
+      } catch (err) {
+        return err;
+      }
+    } else if (this.signal === true) {
+      console.log('invalid entry');
+    }
+  }
   ngOnInit() {
+    this.dataNames$ = this.data.getAllNames('layman');
+
+    const jsonToken = localStorage.getItem('auth_token');
+    try {
+      this.genData.getGenerators(jsonToken).subscribe((genData) => {
+        this.generators$ = genData;
+        return this.generators$;
+      });
+    } catch (err) {
+      return err;
+    }
+
+    const labels = [];
+    const data = [];
+
+    try {
+
+      // create example chart
+      let dataType = localStorage.getItem('data_type');
+      if (dataType === null) {
+        this.dataSig$ = true;
+        dataType = 'oil.temp';
+      } else {
+        this.dataSig$ = false;
+        this.dataType$ = this.data.convertNames(dataType, 'layman');
+      }
+      this.graphData.getDataForVis(jsonToken, '2019/03/13', '2019/03/14', 'sum', localStorage.getItem('gen_id'), dataType)
+        .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++) {
+              genData.push(this.chart$['outputs'][0]['dps'][n][c + 1]);
+            }
+            data.push(genData);
+          }
+          this.laymanDataVal$ = 'Example Lube Oil Temperature';
+          this.chart = this.graphData.createChart(labels, data, [localStorage.getItem('gen_name')]);
+          this.unit$ = this.data.getUnits('oil.temp');
+          this.startTime$ = '03/13/2019';
+          this.endTime$ = '03/14/2019';
+          this.function$ = 'sum';
+          this.genName$ = localStorage.getItem('gen_name');
+        });
+
+    } catch (err) {
+      return err;
+    }
   }
 
-}
+}
\ No newline at end of file