Affichage graphique au changement de page

**Whisper40** · 09/01/2021, 12h22

Bonjour à tous

J'ai sur une page "DashBoard" un graphique de type Bar basé sur "chartjs".
Lorsque je lance le dashboard, le graphique se dessine sans problème, par contre si je vais sur une autre page et que je revient sur le dashboard, le graphique ne se dessine pas.

Important : La data est pourtant bien là ! car lorsque je clique sur "ne pas afficher tel ou tel status", le graphique se dessine..
Je ne peux pas fournir de stackblitz pour ce cas de figure..

chartjs-bar.component.ts

Code javascript :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { RestApiService } from '../../../shared/rest-api/rest-api.service';
 
@Component({
  selector: 'ngx-chartjs-bar',
  template: `
    <chart type="bar" [data]="data" [options]="options"></chart>
  `,
})
export class ChartjsBarComponent implements OnDestroy, OnInit, AfterViewInit {
  data: any;
  options: any;
  themeSubscription: any;
 
  getHistoryOfContainers(): any{
    this.dataService.getHistoryOfContainerDeployment().subscribe((res)=>{
      this.data.labels = res.labels;     
      this.data.datasets[0].data = res.running;
      this.data.datasets[1].data = res.paused;
      this.data.datasets[2].data = res.stopped;
      this.data.datasets[3].data = res.failed;
    });    
  }
 
  ngOnInit() {
    console.log("passé"); // s'affiche à chaque chargement de page.
    this.getHistoryOfContainers();
  }
 
  constructor(private theme: NbThemeService, private dataService: RestApiService) {    
 
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;      
 
      this.data = {
        labels: ['Loading...','Loading...','Loading...','Loading...','Loading...','Loading...','Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...'],
        datasets: [{
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Running',
          backgroundColor: NbColorHelper.hexToRgbA(colors.success, 0.8),
        }, {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Paused',
          backgroundColor: NbColorHelper.hexToRgbA(colors.warning, 0.8),
        },
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Stopped',
          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.8),
        },
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Failed',
          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.8),
        }],
      };
 
      this.options = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
                beginAtZero: true,
                callback: function(value) {if (value % 1 === 0) {return value;}}
              },
            },
          ],
        },
      };
    });
  }
 
  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

chartjs.component.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
  <div class="col-lg-12">
    <nb-card>
      <nb-card-header>
        <i class="ion-cube"></i>
        <span class="title"> Evolution du nombre de conteneurs au cours du temps</span>
      </nb-card-header>
      <nb-card-body>
        <ngx-chartjs-bar></ngx-chartjs-bar>
      </nb-card-body>
    </nb-card>
  </div>
</div>

chartjs.component.ts

Code javascript :

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

1
2
3
4
5
6
7
8
import { Component } from '@angular/core';
 
@Component({
  selector: 'ngx-chartjs',
  styleUrls: ['./chartjs.component.scss'],
  templateUrl: './chartjs.component.html',
})
export class ChartjsComponent {}

Si jamais vous avez une idée d'ou ça peut venir

**krakatoa** · 09/01/2021, 12h33

ce que tu as mis dans le constructor met le dans ngOnInit()

**Whisper40** · 09/01/2021, 12h43

Résultat strictement identique

Code javascript :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
 
import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { RestApiService } from '../../../shared/rest-api/rest-api.service';
 
@Component({
  selector: 'ngx-chartjs-bar',
  template: `
    <chart type="bar" [data]="data" [options]="options"></chart>
  `,
})
export class ChartjsBarComponent implements OnDestroy, OnInit, AfterViewInit {
  data: any;
  options: any;
  themeSubscription: any;
 
  getHistoryOfContainers(): any{
    this.dataService.getHistoryOfContainerDeployment().subscribe((res)=>{
      this.data.labels = res.labels;     
      this.data.datasets[0].data = res.running;
      this.data.datasets[1].data = res.paused;
      this.data.datasets[2].data = res.stopped;
      this.data.datasets[3].data = res.failed;
    });    
  }
 
  ngOnInit() {
    console.log("passé"); // s'affiche à chaque chargement de page.
 
 
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;      
 
      this.data = {
        labels: ['Loading...','Loading...','Loading...','Loading...','Loading...','Loading...','Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...'],
        datasets: [{
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Running',
          backgroundColor: NbColorHelper.hexToRgbA(colors.success, 0.8),
        }, {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Paused',
          backgroundColor: NbColorHelper.hexToRgbA(colors.warning, 0.8),
        },
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Stopped',
          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.8),
        },
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Failed',
          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.8),
        }],
      };
 
      this.options = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
                beginAtZero: true,
                callback: function(value) {if (value % 1 === 0) {return value;}}
              },
            },
          ],
        },
      };
    });
 
    this.getHistoryOfContainers();
  }
 
  constructor(private theme: NbThemeService, private dataService: RestApiService) {    
 
 
  }
 
  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

**Whisper40** · 09/01/2021, 12h50

Après tests, le problème se produit uniquement si la data provient de l'API. Le problème n'apparait pas avec de la data locale .
En mettant par example : data: [1,0,0,0,0,0,0,0,0,0,0,0],
Il y a toujours de la data qui s'affiche au load de la page

EDIT : EN plus de ça, lors du changement de couleur du theme, la data disparait tout simplement..

**krakatoa** · 09/01/2021, 13h25

est ce que sur chartjs il existe une fonction : refresh ou reload ou reset ou init ....
pour indiquer à chartjs de rafraichir le graphique à la fin de la récupération des données via l'API

peut être
https://www.chartjs.org/docs/latest/...api.html#reset

**Whisper40** · 09/01/2021, 13h27

Oui elle existe cette fonction, mais je ne vois pas du tout comment l'appliquer dans mon cas..
https://www.chartjs.org/docs/latest/...s/updates.html

Le problème d'affichage et de changement de theme à pour cause ce truc d'update, la data de base se load bien..

**Whisper40** · 09/01/2021, 13h37

Solution (l'update de la chart) :

Code javascript :

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
 
import { ChartComponent } from 'angular2-chartjs';
 
<chart #chart1 type="bar" [data]="data" [options]="options"></chart>
 
 @ViewChild('chart1') chart1: ChartComponent; 
 
getHistoryOfContainers(): any{
    this.dataService.getHistoryOfContainerDeployment().subscribe((res)=>{
      this.data.labels = res.labels;     
      this.data.datasets[0].data = res.running;
      this.data.datasets[1].data = res.paused;
      this.data.datasets[2].data = res.stopped;
      this.data.datasets[3].data = res.failed;
      this.chart1.chart.update(); //new
 
    });    
  }

Lors du changement de thème je rappel désormais ma function qui get la data de l'API. (si tu vois mieux n'hésite pas à me dire)

Source : https://github.com/emn178/angular2-chartjs/issues/33

merci

**krakatoa** · 09/01/2021, 13h39

nomrmalement on utilise : new chart(

Code :

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

1
2
 
 this.linechart = new Chart('linechart', {

exemple:

Code :

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

1
2
3
4
 
<div class="plot">
  <canvas id="linechart"></canvas>
</div>

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { MeasurementService } from '../shared/measurement.service';
import { Chart } from 'chart.js';
 
@Component({
  selector: 'tl-measurement',
  templateUrl: './measurement.component.html',
  styleUrls: ['./measurement.component.css']
})
export class MeasurementComponent implements OnInit {
 
  measurements:Observable<any>;
  displayedColumns: string[] = ['timestamp', 'temperature'];
  location:string;
  linechart = [];
  labels = [];
  values = [];
 
  constructor(private measurementService:MeasurementService, private route:ActivatedRoute) { }
 
  ngOnInit(): void {
    this.measurements = this.measurementService.getMeasurements(parseInt(this.route.snapshot.paramMap.get('stationId')));
    this.measurements.subscribe(r => this.location = r[0].station.location);
    this.measurements.subscribe(r => {
      for(let i=0;i<r.length;i++) {
        this.labels.push(new Date(r[i].timestamp*1000).toLocaleString("en-US"));
        this.values.push(r[i].temperature);
      }
      this.linechart = new Chart('linechart', {
        type: 'line',
        data: {
          labels: this.labels,
          datasets: [{
            label: "Temperature [*C]",
            data: this.values,
            fill: false,
            lineTension: 0.5,
            borderColor: "green",
            borderWidth: 4
          }]
        },
        options: {
          title: {
            text: "Temperatures chart",
            display: true
          },
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      });
    });
  }
}

**krakatoa** · 09/01/2021, 13h43

essaye ça :

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
constructor(private ref: ChangeDetectorRef) {
}
 
 getHistoryOfContainers(): any{
    this.dataService.getHistoryOfContainerDeployment().subscribe((res)=>{
      this.data.labels = res.labels;     
      this.data.datasets[0].data = res.running;
      this.data.datasets[1].data = res.paused;
      this.data.datasets[2].data = res.stopped;
      this.data.datasets[3].data = res.failed;
 
 
      this.ref.detectChanges();        // ici --------------------------------------
    });    
  }

**Whisper40** · 09/01/2021, 13h46

J'ai suivi l'implémentation qu'ils donnaient dans le template en adaptant un minimum pour mes besoins.

Le detectChanges n'a eut aucune conséquence

**krakatoa** · 09/01/2021, 14h35

et avec new Chart(..) ?

**Whisper40** · 09/01/2021, 14h36

Je préfère ne pas passer avec ça, ça me fait inclure un composant externe au template, je veux les limiter au max

**dukoid** · 09/01/2021, 14h39

vu que tu utilises le package chartjs, les graphiques s'affichent donc le package tu l'as chargé et utilisé donc je ne vois pas ce que ça change

peux tu expliquer ce point ?

**Whisper40** · 09/01/2021, 14h43

J'utilise "angular2-chartjs", ça me ferais inclure un autre "js" dans la page si j'inclus import { Chart } from 'chart.js' non ?

**dukoid** · 09/01/2021, 14h44

dans le composant: chart
tu fais un ngOnChange pour détecter le changement de valeur de : @Input() data
donc dans le ngOnChanges() tu lances un : this.ref.detectChange()

peut être .... sans stackblitz je ne peux pas essayer

**Whisper40** · 10/01/2021, 10h43

Ta proposition n'a pas fonctionné de mon côté, mais franchement la solution trouvée me convient trés bien, je vais mettre en résolu

Merci à vous

Affichage graphique au changement de page

Angular

Discussions similaires

Partager

Partager