CODEWITHSUNDEEP
angularchart.jsangular5
Easi Test
Easi Test

Reputation: 153

Angular 2+: How to load a data to chartjs graph in every second in Angular

I'm new to Angular 2+, How to load a json data to chartjs graph in every second in Angular,

My component is -

export class TempraturComponent implements OnInit {

  chart =[];

  constructor(private service: ServerService) { }

  ngOnInit() {
    this.service.getServers()
    .subscribe((mdata :any) => {
      if(mdata['Temp']){
      let temp1 = mdata['Temp'].map(mdata => mdata.temp)
      let time = mdata['Temp'].map(mdata => mdata.time)
      }
      else
      {
      let temp1 = mdata.value;
      let time = mdata.label;
      console.log("Temp: "+temp1);
      console.log("time: "+time);
      }

  this.chart =new Chart('canvas', {
    type:'line',
    data: {
      labels:[mdata.label],
      datasets:[
        {
          data:[mdata.value],
          borderColor:'#3cba9f',
          fill:false
        }
      ]
    },
    options:{
      legend:{
        display:false
      },
      scales:{
        xAxes:[{
          display:true
        }],
        yAxes:[{
          display:true
        }]
      }
    }

  })
  })
}
}

By using above code, i can able to plot a graph with single data and My json data is

{
  "value":15.96562696527446,
  "label":"07:13:57 PM"
}

this json data is dynamic, and data will change every second.

My Question is how to append new data to graph,

Upvotes: 0

Views: 1344

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You need to push the new data to the following array,

this.chart.data.datasets.push(yournewObject);

and you can refresh the chart by using

  this.interval = setInterval(() => { 
        this.buildChart(); 
    }, 5000);

make sure to declare interval of type any

Upvotes: 1

Related Questions