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

Question

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);
  }


}

kisor · Accepted Answer · 2017-09-26 06:53:13Z

2

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 = [];
 }

answered Sep 26, 2017 at 6:53

kisor

4846 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WesDev · Accepted Answer · 2017-09-24 15:04:48Z

0

Where are you calling getTankData every 10 seconds?

Add this to to your TypeScript File:

import { ChangeDetectorRef } from '@angular/core';


 constructor(private ref: ChangeDetectorRef){}

 ngOnInit(){

   //Call it every 10 seconds
   setInterval(this.getTankData(), 10000);
}



 //add an change detector at the end of your getTankData function

   getTankData(){
     ...
    this.ref.detectChanges();
    }

answered Sep 24, 2017 at 15:04

WesDev

5845 silver badges7 bronze badges

6 Comments

Abhinav rawat Over a year ago

check about i edited the code for calling after every 10 second

Abhinav rawat Over a year ago

did you think your code can update the graph without reloading the page as my code currently reloading the page to update to it

WesDev Over a year ago

you can update the view without reloading the page ref.detectChanges should do the trick angular.io/api/core/ChangeDetectorRef

Abhinav rawat Over a year ago

Ok let me check it

Abhinav rawat Over a year ago

i have done this but graph is not updating with this

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related