Récupérer les données et les afficher dans chartjs

Version imprimable

Bonjour,
j'ai des données x(abscisse) et y(ordonnée) depuis un webservice, voici la requête que j' exécute :
Code:

1 2 3 4 5 this.randomWalk = this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now()); this.randomWalk.subscribe(data => console.log(data) );
voici ce que me donne le console log:
Code:

1 2 3 4 [{…}] 0: {timestamp: 1613120119, id: 1, courant: 7.1404166} length: 1
l'id serai sur le graphique le x, et le y serai 7.14

comment je dois me débrouiller pour récupérer ces résultat et le donner à l'attribut randomWalk ? (normalement toutes les 10 secondes il faut cette requête mais pour simplifier je n'en récupère qu'un seul).

normalement le code de démonstration doit être ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 @Component({ selector: 'app-root', template: ` <app-line-chart-reactive [dataSource]="randomWalk"></app-line-chart-reactive> ` }) export class AppComponent { randomWalk: Observable<Point>; title = 'blog-angular-chartjs'; constructor() { let last = 0; this.randomWalk = interval(30) .pipe( map(i => ( { x: i, y: (last += Math.random() * 10 - 5) } )) ); } }
comment je dois faire pour arriver à récupérer le x et y depuis le résultat de mon webservice à la place des valeurs aléatoire ?
merci de votre réponse

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
...
import { interval } from 'rxjs';
...
 
    const source = interval(1000);
 
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        return {x: data.id, y: data.courant}
      })
    ).subscribe((res: any) => {
      console.log('res', res);
//
// ajoute la nouvelle donnée {x: .., x:..}
// au chart.js
//  voir si on peut ajouter en direct des données sur un graphique ou si il faut recréer le chart en entier, je ne sais pas
    });

si il faut recréer le chart en entier il faut cumuler le résultat

merci krakota,
j'ai tenté ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 // staticData: Point[] = [{x: 5, y: 6}];
  staticData!: Point[];
  randomWalk: Observable<any> ;
  title = 'blog-angular-chartjs';
 
constructor(private http:HttpClient) {
 
 
    let last = 0;
    const source = interval(4000);
 
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        return {x: data[0].id, y: data[0].courant}                     
      })
    ).subscribe((res: any) => {
      console.log('res : ', res.x);
            console.log('res : ', res.y);
     this.staticData.push({x:res.x,y:res.y});
 
//
// ajoute la nouvelle donnée {x: .., x:..}
// au chart.js
//  voir si on peut ajouter en diect des données sur un graphique ou si il faut recréer le chart en entier, je ne sais pas
    });
    this.randomWalk = interval(3009)
        .pipe(
            map(i => (
              console.log(this.staticData),                                                                                        
                {
                  x: i,
                  y: (last += Math.random() * 10 - 5)
                }
            ))
        );
 
 
  }
}

voici ce que j'obtient le console.log

Code:

1
2
3
 
res :  1
app.component.ts:32 res :  4.114724

j'ai bien les valeurs x et y, mais je n'arrive pas à les pusher ?
une fois que je les aurai pusher, je pourrai ainsi je pense les charger avec l'attribut staticData qui sont un ensemble de valeurs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
constructor(private http:HttpClient) {
 
 
    let last = 0;
    const source = interval(4000);
 
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        return {x: data[0].id, y: data[0].courant}                     
      })
    ).subscribe((res: any) => {
     console.log('res : ', res);
     this.staticData.push({x:res.x,y:res.y});
      console.log('staticData: ', this.staticData);
    });

ça donne quoi ça au bout de 12 secondes ?
le staticData devrait se remplir 3 X

1 pièce(s) jointe(s)

j'ai comme résultat indefined après 12 secondes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
export class AppComponent {
 // staticData: Point[] = [{x: 5, y: 6}];
  staticData!: Point[];
  randomWalk: Observable<any> ;
  title = 'blog-angular-chartjs';
 
 
  constructor(private http:HttpClient) {
    let last = 0;
    const source = interval(4000);
 
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        return {x: data[0].id, y: data[0].courant}                     
      })
    ).subscribe((res: any) => {
     console.log('res 4000 : ', res);
     this.staticData.push({x:res.x,y:res.y});
      console.log('staticData: ', this.staticData);
    });
 
//
// ajoute la nouvelle donnée {x: .., x:..}
// au chart.js
//  voir si on peut ajouter en diect des données sur un graphique ou si il faut recréer le chart en entier, je ne sais pas
 
    this.randomWalk = interval(3000)
        .pipe(
            map(i => (
              console.log("interval 3000==>"+this.staticData),                                                                                        
                {
                  x: i,
                  y: (last += Math.random() * 10 - 5)
                }
            ))
        );
 
 
  }
}

Pièce jointe 591403

y'a comme un problème ici : staticData!: Point[];

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
export class AppComponent {
 // staticData: Point[] = [{x: 5, y: 6}];
  staticData!: Point[];
  randomWalk: Observable<any> ;
  title = 'blog-angular-chartjs';
 
 
  constructor(private http:HttpClient) {
    let last = 0;
    const source = interval(4000);
 
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        return {x: data[0].id, y: data[0].courant}                     
      })
    ).subscribe((res: any) => {
     console.log('res 4000 : ', res);
     this.staticData.push({x:res.x,y:res.y});
      console.log('staticData: ', this.staticData);
    });
 
//
// ajoute la nouvelle donnée {x: .., x:..}
// au chart.js
//  voir si on peut ajouter en diect des données sur un graphique ou si il faut recréer le chart en entier, je ne sais pas
 
    this.randomWalk = interval(3000)
        .pipe(
            map(i => (
              console.log("interval 3000==>"+this.staticData),                                                                                        
                {
                  x: i,
                  y: (last += Math.random() * 10 - 5)
                }
            ))
        );
 
 
  }
}

de plus il manque l'initialisation !

Code:

1
2
3
4
5
6
7
 staticData: Point[];        // faut indiquer que ça doit être un tableau
                                    // parceque sinon tu fais un push sur quelque chose non defini, qui n'est pas un tableau

// donc

 staticData: Point[] = [];

2 pièce(s) jointe(s)

merci dukoid :), j'ai corriger :)
maintenant j'ai mes donnée comme ceci :

Pièce jointe 591909

je remet le script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
export class AppComponent {
 // staticData: Point[] = [{x: 5, y: 6}];
staticData: Point[]=[];
  randomWalk: Observable<any> ;
  title = 'blog-angular-chartjs';
 
 
  constructor(private http:HttpClient) {
    let last = 0;
    const source = interval(4000);
 
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        console.log(data);
        return {x: data[0].id, y: data[0].courant}                     
      })
    ).subscribe((res: any) => {
     console.log('res 4000 : ', res);
     this.staticData.push({x:res.x,y:res.y});
      console.log('staticData: ', this.staticData);
    });
 
//
// ajoute la nouvelle donnée {x: .., x:.c .}
// au chart.js
//  voir si on peut ajouter en diect des données sur un graphique ou si il faut recréer le chart en entier, je ne sais pas
 
    this.randomWalk = interval(4000)
        .pipe(
            map(i => (
              console.log("interval 3000==>"+this.staticData),                                                                                        
                {
                  x: i,
                  y: (last += Math.random() * 10 - 5)
                }
            ))
        );
 
 
  }
}

comment je dois faire pour récupérer mes données x(ici est égale à 1) et y(2.97..) ?
pour le moment le x est à i qui ne cesse d'augmenter et le y est aléatoire.
pour le moment les données sont les mêmes , donc je m'attends à avoir une courbe horizontal qui ne change jamais.
voici les données chargé de staticData:

Pièce jointe 591910

je ne comprends pas la question

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    const subscribe = source.pipe(
      switchMap(() => this.http.get("http://localhost:8080/ecarTypeTime/" + 0 + "/" + Date.now())),
      map((data: any) => {
        console.log(data);
        return {x: data[0].id, y: data[0].courant}                     
      })
    ).subscribe((res: any) => {
     console.log('res 4000 : ', res);
     this.staticData.push({x:res.x,y:res.y});
      console.log('staticData: ', this.staticData);

//
//    ici, non ?    
//

    });

25/02/2021, 17h11
dukoid

Citation:

comment je dois faire pour récupérer mes données x(ici est égale à 1) et y(2.97..) ?

bizarre comme question, tu les affiches x et y et tu demandes comment tu les récupères :mouarf: