CODEWITHSUNDEEP
javascriptarraysangulartypescriptchart.js
Eden1998
Eden1998

Reputation: 139

Chart.js, returning an "date" array to plot the line graph

in the database I have 3 data which i send via Rest-API to the Frontend Angular. This works fine.

Here in browser console, you can see all three dataset, which I get through node.js via Rest-API: How it looks in the browser console

the result in the browser console looks like this:

0:
device_id: 2885679
list: Array(1)
0:
dt: 1596608643
main:
humidity: 10
pressure: 7.86
temp: 120.052
temp_max: 40.052
temp_min: 20.052
__proto__: Object
__proto__: Object
length: 1
__proto__: Array(0)
message: "1"
__v: 0
_id: "5f2a63857ce17d64d49465a4"

In the typescript component xy.component.ts my code looks like this:

export class ContactsComponent {

  chart: any = [];

  constructor(private contactService: ContactService) { }

  ngOnInit() {
    this.contactService.getContacts()
      .subscribe((res: any[]) => {

        console.log(res);

        for (let i = 0; i < res.length; i++) {
          let temp_max = res[i]['list'].map(res => res.main.temp_max);
          let temp_min = res[i]['list'].map(res => res.main.temp_min);
          let alldates = res[i]['list'].map(res => res.dt)

          console.log(alldates)

          let deviceData = []
          alldates.forEach((res) => {
            let jsdate = new Date(res * 1000)
            deviceData.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }))
          })

          console.log(deviceData)
          

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

Why console.log(deviceData) only return the last value of the iteration? I want to return all the values in console.log(devicedata) to draw a graph based on 3 timestamps. Here when I only get back 1 timestamp. Somehow it overwrites the values with the deviceData.push - Methode. My goal is to draw all the datapoints i have (refer to the screenshots of the browser console).

Here how the graph is plot in the browser. It only plots one point, that is exactly the point of the console.log(deviceData): graph

What is the problem and how can I fix it?

Thanks Eden

Upvotes: 0

Views: 292

Answers (1)

Jannes Carpentier
Jannes Carpentier

Reputation: 1898

It seems every object in res has a list with only a single item.
(res[i]['list'] is an array of length 1)

Try logging this:
(this takes all the values of each item and puts them in a single list)

let allvalues = [];
for (const item of res) {
  for (const measurement of item.list) {
    allvalues.push(measurement)
  }
}

console.log(allvalues);

Upvotes: 0

Related Questions