mulitple graph posible

mean-app/src/app/chart.component.ts

@@ -3,6 +3,7 @@ import { DataService } from './data.service';
 
 import { LineData } from './line-data';
 import { BaseChartDirective } from 'ng2-charts/ng2-charts';
+import {LabelData} from "./label-data";
 
 @Component({
   selector: 'line-chart',
@@ -10,7 +11,9 @@ import { BaseChartDirective } from 'ng2-charts/ng2-charts';
 })
 export class LineChartComponent implements OnInit {
 
-  @Input()id:string;
+  @Input()data:LineData;
+  @Input()label:LabelData;
+
   @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
 
   // lineChart
@@ -42,22 +45,16 @@ export class LineChartComponent implements OnInit {
   constructor(private dataService: DataService) {}
 
   ngOnInit(): void {
-    console.log("ChartComponentID=  "+ this.id);
-    this.dataService
-      .get(this.id)
-      .subscribe(res => {
-        console.log("Received from service:");
-        console.log(res);
 
         //const newDataSet2 = [];
         //newDataSet2.push(res.labels.data.slice());
-        this.lineChartLabels = res.labels.data.slice(); //newDataSet2;
+        this.lineChartLabels = this.label.data.slice(); //newDataSet2;
 
         console.log("Updated labels array");
         console.log(this.lineChartLabels);
 
         const newDataSet = [];
-        const newLine = {data: res.TOE1.data, label: res.TOE1.label};
+        const newLine = {data: this.data.data, label: this.data.label};
         newDataSet.push(newLine);
         this.lineChartData = newDataSet;
 
@@ -66,8 +63,5 @@ export class LineChartComponent implements OnInit {
 
         this.chart.chart.update();
 
-      });
-
-    console.log("Init");
   }
 }

mean-app/src/app/detail.component.html

@@ -1,3 +1,5 @@
 <div>
-	<line-chart [id]="id"></line-chart>
+	<line-chart [label]="label" [data]="data"></line-chart>
+
+  <line-chart [label]="label" [data]="data2"></line-chart>
 </div>

mean-app/src/app/detail.component.ts

@@ -3,6 +3,8 @@ import { ActivatedRoute, Params }   from '@angular/router';
 
 import { DataService } from './data.service';
 import {LineChartComponent} from "./chart.component";
+import {LineData} from "./line-data";
+import {LabelData} from "./label-data";
 
 @Component({
   selector: 'detail',
@@ -11,22 +13,30 @@ import {LineChartComponent} from "./chart.component";
 
 export class DetailComponent implements OnInit {
 
-  public id:string;
+  public data:LineData;
+  public label:LabelData;
+
+  public data2:LineData;
 
   constructor(private dataService: DataService,
              private route: ActivatedRoute) {}
 
   ngOnInit(): void {
 
-    this.id = this.route.snapshot.params['id'];
-    console.log("DetailComponentID= " + this.id);
+     let id = this.route.snapshot.params['id'];
+    console.log("DetailComponentID= " + id);
 
- //   this.dataService
-  //    .get(id)
-  //    .subscribe(res => {
+    this.dataService
+      .get(id)
+      .subscribe(res => {
 
+        //const newDataSet2 = [];
+        //newDataSet2.push(res.labels.data.slice());
+        this.label = res.labels; //newDataSet2;
+        this.data = res.HOV;
+        this.data2 = res.TOE1;
 
- //     });
+      });
 
   }