Abhinav rawat Abhinav rawat - 23 days ago 7
Javascript Question

Update Chart js chart dynamically in angular 2 from data getting from nodejs service

HTML FILE

I want to update the chart.js generated graph after every 10 second without reload of page .In this i am using getTankData() to get all the data from backend and update graph elements but the graph is not getting updated until i reload the page.But i want to update it automatically without reload.

<div class="container">

<div class="row">
<div class="col-md-3">
<h2>User Water Graph</h2>

</div>
<div class="col-md-9">
<div style="display: block;">
<canvas id="myChart" baseChart *ngIf="time_data && water_data.length > 0"
width="700" height="400"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"></canvas>
</div>
</div>

</div>
</div>


TypeScript File

import { Component, OnInit } from '@angular/core';
import {AuthService} from '../../services/auth.service';
import {Router} from '@angular/router';
import {FlashMessagesService} from 'angular2-flash-messages';


@Component({
selector: 'app-admin-dashboard',
templateUrl: './admin-dashboard.component.html',
styleUrls: ['./admin-dashboard.component.css']
})
export class AdminDashboardComponent implements OnInit {
total_tank_data:any;
time_data:Array<any>;
water_data:Array<any>;
lineChartData:Array<any> = []
lineChartLabels:Array<any>
lineChartOptions:any
lineChartColors:Array<any>
lineChartLegend:boolean
lineChartType:string
data_length:any

constructor(
private authService:AuthService,
private flashMessage:FlashMessagesService,
private router:Router,) { }

ngOnInit() {

this.getTankData()
if(localStorage.getItem('type')=='user'){
this.authService.userAccess = true
}
else{
this.authService.adminAccess = true
}

}


getTankData(){
var i;
console.log(document.getElementById('chart'));
this.authService.getTank().subscribe(data=>{
this.time_data = [];
this.water_data = [];
this.total_tank_data = [];
this.total_tank_data = data['tank'];
this.lineChartData = [];
this.lineChartLabels = [];
for(i=0;i<this.total_tank_data.length;i++ ){
this.time_data[i] = String(this.total_tank_data[i]['timestamp']);
this.water_data[i]=parseInt(this.total_tank_data[i]['liters']);
}

this.lineChartData=[
{data: this.water_data, label: 'Tank'}
];

this.lineChartLabels= this.time_data;

console.log(this.lineChartLabels)
this.lineChartOptions= {
responsive: true
};
this.lineChartColors = [
{ // grey
backgroundColor: 'rgba(64,164,223,0.6)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},

];
this.lineChartLegend= true;
this.lineChartType= 'line';
this.data_length = this.total_tank_data.length;


});
setInterval(()=>{
this.getTankData();
location.reload()
},10000);
}


}

Answer Source

your empty array is always presented while new data arrives form backend before completing a loop.so please remove your array form the function you called and initiate your empty array at the beginning.

ngOnInit(){
this.time_data = [];
this.water_data = [];
 }