Having trouble updating the data in my ngx-echarts (Angular 10) ngx-echarts : v6.0
I want to retrieve data from my API and then update the chart with the values. It seems to work sometimes, but not always. The issue seems to be related to the loading speed of the page. When it's fast, the value is not updated (even though I see the correct value in the console).
I couldn't find a good documentation on how to update the chart. Hoping someone can help me out. Thanks!
import { delay } from 'rxjs/operators';
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { RestApiService } from '../../shared/rest-api/rest-api.service';
import { ActivatedRoute } from '@angular/router';
import { EChartOption } from 'echarts';
declare const echarts: any;
@Component({
selector: 'ngx-solar',
templateUrl: './solar.component.html',
styleUrls: ['./solar.component.scss']
})
export class SolarComponent implements AfterViewInit, OnDestroy, OnInit {
id: any;
value: number = 10; //default value here
option: any = {};
themeSubscription: any;
dynamicData: any;
@Input('chartValue')
set chartValue(value: number) {
if (this.option.series) {
this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value;
this.option.series[1].data[0].value = value;
}
}
ngOnInit(): void{
this.route.params.subscribe(params => {
this.id = params['id'];
});
this.dataService.getMetricsOfContainer(this.id).subscribe((res)=>{
console.log(JSON.stringify(res.cpu)); //value appears here all time
this.value = res.cpu;
// var myChart = echarts.init(document.getElementById('chart'));
// myChart.setOption(this.option);
});
}
constructor(private theme: NbThemeService, private dataService: RestApiService, private route: ActivatedRoute) {
}
ngAfterViewInit() {
this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
const solarTheme: any = config.variables.solar;
this.option = Object.assign({}, {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
series: [
{
name: ' ',
clockWise: true,
hoverAnimation: false,
type: 'pie',
center: ['45%', '50%'],
radius: solarTheme.radius,
data: [
{
value: this.value,
name: ' ',
label: {
normal: {
position: 'center',
formatter: '{d}%',
textStyle: {
fontSize: '22',
fontFamily: config.variables.fontSecondary,
fontWeight: '600',
color: config.variables.fgHeading,
},
},
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: solarTheme.gradientRight,
},
]),
shadowColor: solarTheme.shadowColor,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
},
},
hoverAnimation: false,
},
{
value: 100 - this.value,
name: ' ',
tooltip: {
show: false,
},
label: {
normal: {
position: 'inner',
},
},
itemStyle: {
normal: {
color: solarTheme.secondSeriesFill,
},
},
},
],
},
{
name: ' ',
clockWise: true,
hoverAnimation: false,
type: 'pie',
center: ['45%', '50%'],
radius: solarTheme.radius,
data: [
{
value: this.value,
name: ' ',
label: {
normal: {
position: 'inner',
show: false,
},
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: solarTheme.gradientLeft,
},
{
offset: 1,
color: solarTheme.gradientRight,
},
]),
shadowColor: solarTheme.shadowColor,
shadowBlur: 7,
},
},
hoverAnimation: false,
},
{
value: 28,
name: ' ',
tooltip: {
show: false,
},
label: {
normal: {
position: 'inner',
},
},
itemStyle: {
normal: {
color: 'none',
},
},
},
],
},
],
});
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}
Html:
<nb-card size="tiny" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<div id="chart" echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="h4 value">6.421 kWh</div>
<div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
</div>
</nb-card-body>
</nb-card>