Discussion :

[keokaz]

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

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

merci krakota,
j'ai tenté ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dukoid]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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



je remet le script:

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

[krakatoa]

je ne comprends pas la question

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?    
//

    });

[dukoid]

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