Added test service

mean-app/src/app/app.module.ts

@@ -7,6 +7,8 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { AppComponent } from './app.component';
 import { LineChartComponent } from './chart.component';
 
+import { DataService } from './data.service';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -18,7 +20,7 @@ import { LineChartComponent } from './chart.component';
     HttpModule,
     ChartsModule
   ],
-  providers: [],
+  providers: [DataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -12,15 +12,4 @@
                 (chartClick)="chartClicked($event)"></canvas>
     </div>
   </div>
-  <div class="col-md-6" style="margin-bottom: 10px">
-    <table class="table table-responsive table-condensed">
-      <tr>
-        <th *ngFor="let label of lineChartLabels">{{label}}</th>
-      </tr>
-      <tr *ngFor="let d of lineChartData">
-        <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
-      </tr>
-    </table>
-    <button (click)="randomize()">CLICK</button>
-  </div>
 </div>

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

@@ -1,37 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DataService } from './data.service';
  
+import { LineData } from './line-data';
+
 @Component({
   selector: 'line-chart',
   templateUrl: './chart.component.html'
 })
-export class LineChartComponent {
+export class LineChartComponent implements OnInit {
   // lineChart
   public lineChartData:Array<any> = [
-    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
-    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
-    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
+    {data: [0,0,0,0,0,0,0], label: 'Series A'}
   ];
   public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
   public lineChartOptions:any = {
     responsive: true
   };
   public lineChartColors:Array<any> = [
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    },
-    { // dark grey
-      backgroundColor: 'rgba(77,83,96,0.2)',
-      borderColor: 'rgba(77,83,96,1)',
-      pointBackgroundColor: 'rgba(77,83,96,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(77,83,96,1)'
-    },
     { // grey
       backgroundColor: 'rgba(148,159,177,0.2)',
       borderColor: 'rgba(148,159,177,1)',
@@ -44,17 +29,6 @@ export class LineChartComponent {
   public lineChartLegend:boolean = true;
   public lineChartType:string = 'line';
  
-  public randomize():void {
-    let _lineChartData:Array<any> = new Array(this.lineChartData.length);
-    for (let i = 0; i < this.lineChartData.length; i++) {
-      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
-      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
-        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
-      }
-    }
-    this.lineChartData = _lineChartData;
-  }
- 
   // events
   public chartClicked(e:any):void {
     console.log(e);
@@ -63,4 +37,13 @@ export class LineChartComponent {
   public chartHovered(e:any):void {
     console.log(e);
   }
+
+  constructor(private dataService: DataService) {}
+
+  ngOnInit(): void {
+
+    this.dataService
+      .get()
+      .subscribe(res => this.lineChartData[0].data = res.data);
+  }
 }

mean-app/src/app/data.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Rx';
+
+import { LineData } from './line-data';
+
+@Injectable()
+export class DataService {
+  
+  get(): Observable<LineData> {
+    
+    let lineChartData$:LineData =
+      <LineData>( {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'} );
+
+    return Observable.create(observer => {
+             observer.next(lineChartData$);
+             observer.complete();
+   });
+
+  }
+}

mean-app/src/app/line-data.ts

@@ -0,0 +1,4 @@
+export class LineData {
+  public data: Array<number>;
+  public label:string;
+}