mulitple graph posible

mean-app/dist/main.bundle.js

@@ -5,7 +5,7 @@ webpackJsonp([1,4],{
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map__ = __webpack_require__(675);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map__ = __webpack_require__(677);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_rxjs_add_operator_map__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_http__ = __webpack_require__(308);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return DataService; });
@@ -126,7 +126,7 @@ var DashboardComponent = (function () {
     DashboardComponent = __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
             selector: 'dashboard',
-            template: __webpack_require__(669)
+            template: __webpack_require__(671)
         }), 
         __metadata('design:paramtypes', [])
     ], DashboardComponent);
@@ -162,17 +162,23 @@ var DetailComponent = (function () {
         this.route = route;
     }
     DetailComponent.prototype.ngOnInit = function () {
-        this.id = this.route.snapshot.params['id'];
+        var _this = this;
-        console.log("DetailComponentID= " + this.id);
+        var id = this.route.snapshot.params['id'];
-        //   this.dataService
+        console.log("DetailComponentID= " + id);
-        //    .get(id)
+        this.dataService
-        //    .subscribe(res => {
+            .get(id)
-        //     });
+            .subscribe(function (res) {
+            //const newDataSet2 = [];
+            //newDataSet2.push(res.labels.data.slice());
+            _this.label = res.labels; //newDataSet2;
+            _this.data = res.HOV;
+            _this.data2 = res.TOE1;
+        });
     };
     DetailComponent = __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
             selector: 'detail',
-            template: __webpack_require__(670)
+            template: __webpack_require__(672)
         }), 
         __metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2__data_service__["a" /* DataService */]) === 'function' && _a) || Object, (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__angular_router__["b" /* ActivatedRoute */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__angular_router__["b" /* ActivatedRoute */]) === 'function' && _b) || Object])
     ], DetailComponent);
@@ -222,7 +228,7 @@ var DeviceComponent = (function () {
     DeviceComponent = __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
             selector: 'device',
-            template: __webpack_require__(671)
+            template: __webpack_require__(673)
         }), 
         __metadata('design:paramtypes', [(typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2__angular_router__["c" /* Router */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2__angular_router__["c" /* Router */]) === 'function' && _a) || Object, (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */]) === 'function' && _b) || Object])
     ], DeviceComponent);
@@ -254,7 +260,7 @@ webpackEmptyContext.id = 389;
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__ = __webpack_require__(477);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__environments_environment__ = __webpack_require__(511);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__environments_environment__ = __webpack_require__(513);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_app_module__ = __webpack_require__(509);
 
 
@@ -337,8 +343,8 @@ var AppComponent = (function () {
     AppComponent = __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
             selector: 'app-root',
-            template: __webpack_require__(667),
+            template: __webpack_require__(669),
-            styles: [__webpack_require__(666)]
+            styles: [__webpack_require__(668)]
         }), 
         __metadata('design:paramtypes', [])
     ], AppComponent);
@@ -423,8 +429,10 @@ var AppModule = (function () {
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data_service__ = __webpack_require__(151);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__ = __webpack_require__(371);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__line_data__ = __webpack_require__(512);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__ = __webpack_require__(371);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__label_data__ = __webpack_require__(511);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LineChartComponent; });
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -438,6 +446,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 
 
 
+
+
 var LineChartComponent = (function () {
     function LineChartComponent(dataService) {
         this.dataService = dataService;
@@ -468,45 +478,40 @@ var LineChartComponent = (function () {
         this.lineChartType = 'line';
     }
     LineChartComponent.prototype.ngOnInit = function () {
-        var _this = this;
+        //const newDataSet2 = [];
-        console.log("ChartComponentID=  " + this.id);
+        //newDataSet2.push(res.labels.data.slice());
-        this.dataService
+        this.lineChartLabels = this.label.data.slice(); //newDataSet2;
-            .get(this.id)
+        console.log("Updated labels array");
-            .subscribe(function (res) {
+        console.log(this.lineChartLabels);
-            console.log("Received from service:");
+        var newDataSet = [];
-            console.log(res);
+        var newLine = { data: this.data.data, label: this.data.label };
-            //const newDataSet2 = [];
+        newDataSet.push(newLine);
-            //newDataSet2.push(res.labels.data.slice());
+        this.lineChartData = newDataSet;
-            _this.lineChartLabels = res.labels.data.slice(); //newDataSet2;
+        console.log("Updated lines array");
-            console.log("Updated labels array");
+        console.log(this.lineChartData);
-            console.log(_this.lineChartLabels);
+        this.chart.chart.update();
-            var newDataSet = [];
-            var newLine = { data: res.TOE1.data, label: res.TOE1.label };
-            newDataSet.push(newLine);
-            _this.lineChartData = newDataSet;
-            console.log("Updated lines array");
-            console.log(_this.lineChartData);
-            _this.chart.chart.update();
-        });
-        console.log("Init");
     };
     __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
-        __metadata('design:type', String)
+        __metadata('design:type', (typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2__line_data__["a" /* LineData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2__line_data__["a" /* LineData */]) === 'function' && _a) || Object)
-    ], LineChartComponent.prototype, "id", void 0);
+    ], LineChartComponent.prototype, "data", void 0);
     __decorate([
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewChild"])(__WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"]), 
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
-        __metadata('design:type', (typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_2_ng2_charts_ng2_charts__["BaseChartDirective"]) === 'function' && _a) || Object)
+        __metadata('design:type', (typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_4__label_data__["a" /* LabelData */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_4__label_data__["a" /* LabelData */]) === 'function' && _b) || Object)
+    ], LineChartComponent.prototype, "label", void 0);
+    __decorate([
+        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewChild"])(__WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__["BaseChartDirective"]), 
+        __metadata('design:type', (typeof (_c = typeof __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__["BaseChartDirective"] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_3_ng2_charts_ng2_charts__["BaseChartDirective"]) === 'function' && _c) || Object)
     ], LineChartComponent.prototype, "chart", void 0);
     LineChartComponent = __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
             selector: 'line-chart',
-            template: __webpack_require__(668)
+            template: __webpack_require__(670)
         }), 
-        __metadata('design:paramtypes', [(typeof (_b = typeof __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */]) === 'function' && _b) || Object])
+        __metadata('design:paramtypes', [(typeof (_d = typeof __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */] !== 'undefined' && __WEBPACK_IMPORTED_MODULE_1__data_service__["a" /* DataService */]) === 'function' && _d) || Object])
     ], LineChartComponent);
     return LineChartComponent;
-    var _a, _b;
+    var _a, _b, _c, _d;
 }());
 //# sourceMappingURL=C:/Users/martijn/Documents/GitHub/smarthome/mean-app/src/chart.component.js.map
 
@@ -515,6 +520,34 @@ var LineChartComponent = (function () {
 /***/ 511:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LabelData; });
+var LabelData = (function () {
+    function LabelData() {
+    }
+    return LabelData;
+}());
+//# sourceMappingURL=C:/Users/martijn/Documents/GitHub/smarthome/mean-app/src/label-data.js.map
+
+/***/ }),
+
+/***/ 512:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LineData; });
+var LineData = (function () {
+    function LineData() {
+    }
+    return LineData;
+}());
+//# sourceMappingURL=C:/Users/martijn/Documents/GitHub/smarthome/mean-app/src/line-data.js.map
+
+/***/ }),
+
+/***/ 513:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return environment; });
 // The file contents for the current environment will overwrite these during build.
@@ -528,49 +561,49 @@ var environment = {
 
 /***/ }),
 
-/***/ 666:
+/***/ 668:
 /***/ (function(module, exports) {
 
 module.exports = ""
 
 /***/ }),
 
-/***/ 667:
+/***/ 669:
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"container\">\r\n\r\n  <nav class=\"navbar navbar-default\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"navbar-header\">\r\n        <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar\" aria-expanded=\"false\" aria-controls=\"navbar\">\r\n          <span class=\"sr-only\">Toggle navigation</span>\r\n          <span class=\"icon-bar\"></span>\r\n          <span class=\"icon-bar\"></span>\r\n          <span class=\"icon-bar\"></span>\r\n        </button>\r\n        <a class=\"navbar-brand\">Energiemeter</a>\r\n      </div>\r\n      <div id=\"navbar\" class=\"navbar-collapse collapse\">\r\n        <ul class=\"nav navbar-nav\">\r\n          <li routerLink=\"/dashboard\" routerLinkActive=\"active\"><a routerLink=\"/dashboard\" routerLinkActive=\"active\">Dashboard</a></li>\r\n          <li routerLink=\"/device\" routerLinkActive=\"active\"><a routerLink=\"/device\" routerLinkActive=\"active\">Device</a></li>\r\n        </ul>\r\n      </div><!--/.nav-collapse -->\r\n    </div><!--/.container-fluid -->\r\n  </nav>\r\n\r\n  <div class=\"row\">\r\n\r\n    <div class=\"col-md-12\">\r\n      <div class=\"page-header\">\r\n        <h1>{{title}} <small>Avans</small></h1>\r\n      </div>\r\n    </div>\r\n\r\n    <router-outlet></router-outlet>\r\n\r\n  </div>\r\n</div>\r\n"
 
 /***/ }),
 
-/***/ 668:
+/***/ 670:
 /***/ (function(module, exports) {
 
 module.exports = "<div class=\"row\">\r\n  <div class=\"col-md-6\">\r\n    <div style=\"display: block;\">\r\n    <canvas baseChart width=\"400\" height=\"400\"\r\n                [datasets]=\"lineChartData\"\r\n                [labels]=\"lineChartLabels\"\r\n                [options]=\"lineChartOptions\"\r\n                [colors]=\"lineChartColors\"\r\n                [legend]=\"lineChartLegend\"\r\n                [chartType]=\"lineChartType\"></canvas>\r\n    </div>\r\n  </div>\r\n</div>"
 
 /***/ }),
 
-/***/ 669:
+/***/ 671:
 /***/ (function(module, exports) {
 
 module.exports = "<div>\r\n\t<line-chart></line-chart>\r\n</div>"
 
 /***/ }),
 
-/***/ 670:
+/***/ 672:
 /***/ (function(module, exports) {
 
-module.exports = "<div>\r\n\t<line-chart [id]=\"id\"></line-chart>\r\n</div>\r\n"
+module.exports = "<div>\r\n\t<line-chart [label]=\"label\" [data]=\"data\"></line-chart>\r\n\r\n  <line-chart [label]=\"label\" [data]=\"data2\"></line-chart>\r\n</div>\r\n"
 
 /***/ }),
 
-/***/ 671:
+/***/ 673:
 /***/ (function(module, exports) {
 
 module.exports = "<div>\r\n\r\n<ul>\r\n        <li *ngFor=\"let device of devices\" (click)=\"goToDetails(device.sn)\">\r\n          <span class=\"badge\"> {{device.sn}} </span> {{device.name}}\r\n        </li>\r\n</ul>\r\n\r\n</div>"
 
 /***/ }),
 
-/***/ 690:
+/***/ 692:
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__(390);
@@ -578,5 +611,5 @@ module.exports = __webpack_require__(390);
 
 /***/ })
 
-},[690]);
+},[692]);
 //# sourceMappingURL=main.bundle.map

mean-app/dist/styles.bundle.js

@@ -6,10 +6,10 @@ webpackJsonp([2,4],{
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(662);
+var content = __webpack_require__(664);
 if(typeof content === 'string') content = [[module.i, content, '']];
 // add the styles to the DOM
-var update = __webpack_require__(688)(content, {});
+var update = __webpack_require__(690)(content, {});
 if(content.locals) module.exports = content.locals;
 // Hot Module Replacement
 if(false) {
@@ -27,10 +27,10 @@ if(false) {
 
 /***/ }),
 
-/***/ 662:
+/***/ 664:
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(663)();
+exports = module.exports = __webpack_require__(665)();
 // imports
 
 
@@ -42,7 +42,7 @@ exports.push([module.i, "/* You can add global styles to this file, and also imp
 
 /***/ }),
 
-/***/ 663:
+/***/ 665:
 /***/ (function(module, exports) {
 
 /*
@@ -99,7 +99,7 @@ module.exports = function() {
 
 /***/ }),
 
-/***/ 688:
+/***/ 690:
 /***/ (function(module, exports) {
 
 /*
@@ -352,7 +352,7 @@ function updateLink(linkElement, obj) {
 
 /***/ }),
 
-/***/ 692:
+/***/ 694:
 /***/ (function(module, exports, __webpack_require__) {
 
 module.exports = __webpack_require__(392);
@@ -360,5 +360,5 @@ module.exports = __webpack_require__(392);
 
 /***/ })
 
-},[692]);
+},[694]);
 //# sourceMappingURL=styles.bundle.map

mean-app/dist/vendor.bundle.js

@@ -5063,7 +5063,7 @@ function DomAdapter_tsickle_Closure_declarations() {
 "use strict";
 
 var root_1 = __webpack_require__(57);
-var toSubscriber_1 = __webpack_require__(686);
+var toSubscriber_1 = __webpack_require__(688);
 var observable_1 = __webpack_require__(161);
 /**
  * A representation of any set of values over any amount of time. This the most basic building block
@@ -6931,7 +6931,7 @@ function templateVisitAll(visitor, asts, context) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_operator_toPromise__ = __webpack_require__(683);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_operator_toPromise__ = __webpack_require__(685);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_rxjs_operator_toPromise___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_rxjs_operator_toPromise__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__facade_collection__ = __webpack_require__(305);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__facade_lang__ = __webpack_require__(76);
@@ -7522,7 +7522,7 @@ function ControlContainer_tsickle_Closure_declarations() {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_rxjs_operator_concatAll___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_rxjs_operator_concatAll__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_rxjs_operator_every__ = __webpack_require__(380);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_rxjs_operator_every___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_rxjs_operator_every__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_rxjs_operator_last__ = __webpack_require__(680);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_rxjs_operator_last__ = __webpack_require__(682);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_rxjs_operator_last___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_rxjs_operator_last__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_rxjs_operator_map__ = __webpack_require__(110);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_rxjs_operator_map___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_rxjs_operator_map__);
@@ -11181,7 +11181,7 @@ var Observable_1 = __webpack_require__(17);
 var Subscriber_1 = __webpack_require__(30);
 var Subscription_1 = __webpack_require__(237);
 var ObjectUnsubscribedError_1 = __webpack_require__(382);
-var SubjectSubscription_1 = __webpack_require__(674);
+var SubjectSubscription_1 = __webpack_require__(676);
 var rxSubscriber_1 = __webpack_require__(242);
 /**
  * @class SubjectSubscriber<T>
@@ -21146,7 +21146,7 @@ var XSRFStrategy = (function () {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_rxjs_operator_map___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8_rxjs_operator_map__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_rxjs_operator_mergeMap__ = __webpack_require__(111);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_rxjs_operator_mergeMap___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_9_rxjs_operator_mergeMap__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_rxjs_operator_reduce__ = __webpack_require__(682);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_rxjs_operator_reduce__ = __webpack_require__(684);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_rxjs_operator_reduce___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_10_rxjs_operator_reduce__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__apply_redirects__ = __webpack_require__(497);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__config__ = __webpack_require__(498);
@@ -45146,9 +45146,9 @@ exports.OuterSubscriber = OuterSubscriber;
 var isArray_1 = __webpack_require__(384);
 var isObject_1 = __webpack_require__(387);
 var isFunction_1 = __webpack_require__(386);
-var tryCatch_1 = __webpack_require__(687);
+var tryCatch_1 = __webpack_require__(689);
 var errorObject_1 = __webpack_require__(383);
-var UnsubscriptionError_1 = __webpack_require__(684);
+var UnsubscriptionError_1 = __webpack_require__(686);
 /**
  * Represents a disposable resource, such as the execution of an Observable. A
  * Subscription has one important method, `unsubscribe`, that takes no argument
@@ -45342,7 +45342,7 @@ function flattenUnsubscriptionErrors(errors) {
 
 "use strict";
 
-var FromObservable_1 = __webpack_require__(677);
+var FromObservable_1 = __webpack_require__(679);
 exports.from = FromObservable_1.FromObservable.create;
 //# sourceMappingURL=from.js.map
 
@@ -45579,7 +45579,7 @@ var isPromise_1 = __webpack_require__(388);
 var isObject_1 = __webpack_require__(387);
 var Observable_1 = __webpack_require__(17);
 var iterator_1 = __webpack_require__(241);
-var InnerSubscriber_1 = __webpack_require__(672);
+var InnerSubscriber_1 = __webpack_require__(674);
 var observable_1 = __webpack_require__(161);
 function subscribeToResult(outerSubscriber, result, outerValue, outerIndex) {
     var destination = new InnerSubscriber_1.InnerSubscriber(outerSubscriber, outerValue, outerIndex);
@@ -63285,7 +63285,7 @@ function provideRouterInitializer() {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_rxjs_operator_catch___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_rxjs_operator_catch__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_rxjs_operator_concatMap__ = __webpack_require__(379);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_rxjs_operator_concatMap___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_rxjs_operator_concatMap__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_rxjs_operator_filter__ = __webpack_require__(679);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_rxjs_operator_filter__ = __webpack_require__(681);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_rxjs_operator_filter___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_rxjs_operator_filter__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_rxjs_operator_mergeAll__ = __webpack_require__(240);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_rxjs_operator_mergeAll___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_rxjs_operator_mergeAll__);
@@ -63541,7 +63541,7 @@ function RouterPreloader_tsickle_Closure_declarations() {
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
-__export(__webpack_require__(664));
+__export(__webpack_require__(666));
 
 
 /***/ }),
@@ -63572,7 +63572,7 @@ var __extends = (this && this.__extends) || function (d, b) {
 var Observable_1 = __webpack_require__(17);
 var ScalarObservable_1 = __webpack_require__(376);
 var EmptyObservable_1 = __webpack_require__(374);
-var isScheduler_1 = __webpack_require__(685);
+var isScheduler_1 = __webpack_require__(687);
 /**
  * We need this JSDoc comment for affecting ESDoc.
  * @extends {Ignored}
@@ -81272,7 +81272,9 @@ var /** @type {?} */ VERSION = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["
 /* 661 */,
 /* 662 */,
 /* 663 */,
-/* 664 */
+/* 664 */,
+/* 665 */,
+/* 666 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81535,14 +81537,14 @@ exports.ChartsModule = ChartsModule;
 
 
 /***/ }),
-/* 665 */,
-/* 666 */,
 /* 667 */,
 /* 668 */,
 /* 669 */,
 /* 670 */,
 /* 671 */,
-/* 672 */
+/* 672 */,
+/* 673 */,
+/* 674 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81584,7 +81586,7 @@ exports.InnerSubscriber = InnerSubscriber;
 //# sourceMappingURL=InnerSubscriber.js.map
 
 /***/ }),
-/* 673 */
+/* 675 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81717,7 +81719,7 @@ exports.Notification = Notification;
 //# sourceMappingURL=Notification.js.map
 
 /***/ }),
-/* 674 */
+/* 676 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81763,7 +81765,7 @@ exports.SubjectSubscription = SubjectSubscription;
 //# sourceMappingURL=SubjectSubscription.js.map
 
 /***/ }),
-/* 675 */
+/* 677 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81774,7 +81776,7 @@ Observable_1.Observable.prototype.map = map_1.map;
 //# sourceMappingURL=map.js.map
 
 /***/ }),
-/* 676 */
+/* 678 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81850,7 +81852,7 @@ exports.ArrayLikeObservable = ArrayLikeObservable;
 //# sourceMappingURL=ArrayLikeObservable.js.map
 
 /***/ }),
-/* 677 */
+/* 679 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -81864,12 +81866,12 @@ var isArray_1 = __webpack_require__(384);
 var isArrayLike_1 = __webpack_require__(385);
 var isPromise_1 = __webpack_require__(388);
 var PromiseObservable_1 = __webpack_require__(375);
-var IteratorObservable_1 = __webpack_require__(678);
+var IteratorObservable_1 = __webpack_require__(680);
 var ArrayObservable_1 = __webpack_require__(373);
-var ArrayLikeObservable_1 = __webpack_require__(676);
+var ArrayLikeObservable_1 = __webpack_require__(678);
 var iterator_1 = __webpack_require__(241);
 var Observable_1 = __webpack_require__(17);
-var observeOn_1 = __webpack_require__(681);
+var observeOn_1 = __webpack_require__(683);
 var observable_1 = __webpack_require__(161);
 /**
  * We need this JSDoc comment for affecting ESDoc.
@@ -81978,7 +81980,7 @@ exports.FromObservable = FromObservable;
 //# sourceMappingURL=FromObservable.js.map
 
 /***/ }),
-/* 678 */
+/* 680 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82147,7 +82149,7 @@ function sign(value) {
 //# sourceMappingURL=IteratorObservable.js.map
 
 /***/ }),
-/* 679 */
+/* 681 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82246,7 +82248,7 @@ var FilterSubscriber = (function (_super) {
 //# sourceMappingURL=filter.js.map
 
 /***/ }),
-/* 680 */
+/* 682 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82371,7 +82373,7 @@ var LastSubscriber = (function (_super) {
 //# sourceMappingURL=last.js.map
 
 /***/ }),
-/* 681 */
+/* 683 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82382,7 +82384,7 @@ var __extends = (this && this.__extends) || function (d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
 var Subscriber_1 = __webpack_require__(30);
-var Notification_1 = __webpack_require__(673);
+var Notification_1 = __webpack_require__(675);
 /**
  * @see {@link Notification}
  *
@@ -82453,7 +82455,7 @@ exports.ObserveOnMessage = ObserveOnMessage;
 //# sourceMappingURL=observeOn.js.map
 
 /***/ }),
-/* 682 */
+/* 684 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82585,7 +82587,7 @@ exports.ReduceSubscriber = ReduceSubscriber;
 //# sourceMappingURL=reduce.js.map
 
 /***/ }),
-/* 683 */
+/* 685 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82663,7 +82665,7 @@ exports.toPromise = toPromise;
 //# sourceMappingURL=toPromise.js.map
 
 /***/ }),
-/* 684 */
+/* 686 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82694,7 +82696,7 @@ exports.UnsubscriptionError = UnsubscriptionError;
 //# sourceMappingURL=UnsubscriptionError.js.map
 
 /***/ }),
-/* 685 */
+/* 687 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82706,7 +82708,7 @@ exports.isScheduler = isScheduler;
 //# sourceMappingURL=isScheduler.js.map
 
 /***/ }),
-/* 686 */
+/* 688 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -82732,7 +82734,7 @@ exports.toSubscriber = toSubscriber;
 //# sourceMappingURL=toSubscriber.js.map
 
 /***/ }),
-/* 687 */
+/* 689 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

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'];
+     let id = this.route.snapshot.params['id'];
-    console.log("DetailComponentID= " + this.id);
+    console.log("DetailComponentID= " + id);
 
- //   this.dataService
+    this.dataService
-  //    .get(id)
+      .get(id)
-  //    .subscribe(res => {
+      .subscribe(res => {
 
+        //const newDataSet2 = [];
+        //newDataSet2.push(res.labels.data.slice());
+        this.label = res.labels; //newDataSet2;
+        this.data = res.HOV;
+        this.data2 = res.TOE1;
 
- //     });
+      });
 
   }