I have a ng2-charts implementation in which I just display some information. I have two tabs one with a table and one with graphs. When I initially enter the first tab the line chart is empty but after I switch back to the tab the information is loaded.
Here is my Component.ts
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { OtamObject } from '../../../shared/models/otam-object';
import { SensorDataOverviewEntity } from '../../../shared/models/sensordata-overview-entity';
@Component({
moduleId: module.id,
selector: 'tab-charts-object-detail',
templateUrl: 'tab-charts.object-detail.component.html'
})
export class TabChartsObjectDetailComponent implements OnInit {
@Input() otamObject: OtamObject;
@Input() sensorDataOverviewEntity: SensorDataOverviewEntity[];
batteryData: number[] = [];
datasets = <any>[
{
label: '% of Battery',
data: this.batteryData
}
]
labels = <any>[];
options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
constructor() {
}
ngOnInit() {
for (let item of this.sensorDataOverviewEntity) {
//create local variables:
var batteryData: number;
var dateString: any;
//assign value out of SensorDataOverviewEntity
dateString = String(item.SendDate);
batteryData = Number(item.Battery);
//push to array
this.batteryData.push(batteryData);
this.labels.push(dateString);
console.log(this.labels);
}
}
}
the html:
<div class="row">
<div class="col-lg-6">
<div style="display:block">
<div class="card-block">
<canvas baseChart class="chart" [datasets]="datasets" [labels]="labels" [options]="options" [chartType]="'line'">
</canvas>
</div>
</div>
</div>
</div>
I have a parent component which loads the information so the children (the chart tab and the table tab) can use this information.
This HTML looks like this:
<div class="col-lg-12">
<ngb-tabset>
<ngb-tab>
<template ngbTabTitle><b>Charts</b></template>
<template ngbTabContent>
<tab-charts-object-detail [otamObject]="otamObject" [sensorDataOverviewEntity]="sensorDataOverviewEntity"> </tab-charts-object-detail>
</template>
</ngb-tab>
<ngb-tab title="Lijst">
<template ngbTabContent>
<tab-list-object-detail [otamObject]="otamObject" [sensorDataOverviewEntity]="sensorDataOverviewEntity"> </tab-list-object-detail>
</template>
</ngb-tab>
</ngb-tabset>
</div>
If I need to provide more code ask me but I think this is enough for now. The problem I'm having now is that the chart is being shown but it should wait with showing when it has his information. Should I fix this with implementing a 'main' route resolve for this detailed view?
