Animation dynamique graphique linéaire basé sur 3 index (x) indépendants qui se recharge en 10min

**Ted82700** · 22/11/2019, 12h33

Je débute mon apprentissage du Javascript en autodidactie et j'ai de nouvelles questions.
J'ai un graphique à faire (exemple en piece jointe), il s'agit d'un linéaire doté de 3 index (x) indépendants doté d'une seul valeur chacun qui se recharge dynamiquement toutes les 10 min en random si possible. Je ne souhaite pas l'effet de défilement en créant et supprimant les index, les courbe des 3 index doivent fluctuer sur place. Pourriez vous me conseiller car la je suis légèrement perdu.

Merci d'avance

Ps: même avec la doc je galère...

**NoSmoking** · 22/11/2019, 13h57

Bonjour,
j'ai fourni il y à peu une contribution qui présente, entre autres, une fonctionnalité d'update des données qui semble correspondre à ce que tu cherches.

Ci dessous les fonctions concernées :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getRandomDatas() {
  const min = 15;
  const max = 100;
  const nbr = 12;
  const datas = [];
  for (let i = 0; i < nbr; i += 1) {
    datas.push(Math.floor(Math.random() * (max - min)) + min);
  }
  return datas;
}
function updateDatas(){
  oChart.data.datasets[0].data = getRandomDatas();
  oChart.update();
}

elles font parties de l'exemple suivant :
↪ <canvas> Download & print image.

Ouvre le fichier et appui sur l'icône ↻ pour voir ce que font ces fonctions.

**Ted82700** · 22/11/2019, 16h30

Pour l'instant j'ai réussi à bricolé ça mais je crois qu' il me manque des index dans le graph car il s'agit de 3 donnée indépendante qui represente les 3 courbes qui se recharge dynamiquement toute les 10mins. (temps de rafraîchissement inférieur dans la pièce-jointe juste pour voir ce que ça donne mon animation.)
Ensuite je voulais savoir s'il y a une possibilité de choisir un écart type pour les données insérer en "random"? (je souhaite faire osciller mes valeurs sur une plage definie)
Je vous montre ou j'en suis pour l'instant.

Code html :

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
<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
    <div style="width: 50%">
        <canvas id="canvas">
		</canvas>
    </div>
    <script>
        var dData = function() {
            return Math.round(Math.random() * 1500) + 10
        };
        var lineChartData = {
            labels: ["", "", ""],
            datasets: [{
                fillColor: "#47c1bf",
                strokeColor: "#47c1bf",
                data: [dData(), dData(), dData()]
            }]
        }
        var index = 3;
        var ctx = document.getElementById("canvas").getContext("2d");
        var lineChartDemo = new Chart(ctx).Line(lineChartData, {
            responsive: true,
            pointDotRadius: 1,
            bezierCurve: true,
            barValueSpacing: 1,
            scaleShowVerticalLines: false,
            scaleGridLineColor: 'none'
        });
        setInterval(function() {
            lineChartDemo.addData([dData()], "");
            lineChartDemo.removeData([dData()], "" + index);
            index++;
        }, 3000);
    </script>
</body>
</html>

**NoSmoking** · 22/11/2019, 18h19

Visiblement tu n'as pas choisi le bon type de représentation graphique, d'après ton image j'opterais plutôt pour une Char "type": "bar".

Ensuite je voulais savoir s'il y a une possibilité de choisir un écart type pour les données insérer en "random"?

C'est ce que fait la fonction que je t'ai mis

Code :

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

1
2
3
4
5
6
7
8
9
10
function getRandomDatas() {
  const min = 15;    // valeur mini souhaitée
  const max = 100;   // valeur maxi souhaitée
  const nbr = 12;    // nombre de valeur en retour
  const datas = [];  // l'Array retourné
  for (let i = 0; i < nbr; i += 1) {
    datas.push(Math.floor(Math.random() * (max - min)) + min);
  }
  return datas;
}

**Ted82700** · 22/11/2019, 18h28

Merci pour le coup de main,
Voici l'exemple de graph une fois déployé que je souhaite essayer de faire en dynamique.
Chaque courbe est indépendante de sa voisine, mais les 3 se recharge en même temps (10mins).

**Ted82700** · 25/11/2019, 10h28

Bonjour, je suis toujours bloqué pour mon graphique si quelqu'un à la solution...

**Ted82700** · 26/11/2019, 13h22

Bonjour, j'ai embauché quelqu'un pour m'aider, mais il n'y arrive pas si quelqu'un peux m'aider ça serait super sympa.

**NoSmoking** · 28/11/2019, 09h44

Navré pour le délai de réponse mais j'allais te faire une réponse lorsque mon « opérateur historique internet » a décidé de me mettre au repos pour trois jours

Ceci étant
la première chose à faire est d'oublier la version 1.x de la bibliothèque pour utiliser la 2.x

Code html :

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

<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>

L'idée est d'avoir des données se présentant sous la forme :

Code :

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

datas = [0, 0, 1, 0, 0, 2, 0, 0, 3, 0, 0]

en fait au lieu de mettre des 0, pour les datas, on va mettre des -5, pour que ces valeurs n’apparaissent pas sur le graphe.

Pour l'affichage des valeurs sur l'axe des X on utilise la même démarche

Code :

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

labels = ["", "", "1", "", "", "2", "", "", "3", "", ""]

seules les valeurs non vides seront affichées.

Pour les modifications, on peut utiliser un tableau d'offsets contenant les index des valeurs à modifier.

Code :

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

1
2
// offset des valeurs à modifier pour cet exemple
const OffsetValeurs = [2, 5, 8];

La fonction de modification pourrait être la suivante

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// update des données des séries
function updateDatas() {
  OffsetValeurs.forEach(function (offset) {
    // récup. valeur aléatoire
    let val = Math.floor(Math.random() * (ValeurMax - ValeurMin)) + ValeurMin;
    // change la valeur concernée
    oChart.data.datasets[0].data[offset] = val;
    // modifie la valeur affichée
    oChart.data.labels[offset] = val;
  });
  // redraw la Chart
  oChart.update();
}

Cette fonction est appelée via un setTimeout comme tu l'as entrepris ...

Code :

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

1
2
// lance la remise à jour
setInterval(updateDatas, 5000);

L'ensemble mis bout à bout donnerait

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Chart.js] Graphe dynamique</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2024570">
<style>
html, body {
  margin: 1em;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  color: #069;
}
.cadre-canvas {
  width: 60%;
  margin-left: 1em;
}
</style>
</head>
<body>
  <h1>[Chart.js] Graphe dynamique</h1>
  <div class="cadre-canvas">
    <canvas id="canvas"></canvas>
  </div>
<script src="https://npmcdn.com/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
<script>
"use strict";
// Maxi pour random
const ValeurMax = 1500;
// mini pour random
const ValeurMin = 150;
// offset des valeurs à modifier pour cet exemple
const OffsetValeurs = [2, 5, 8];
// modification de quelques valeurs par défaut
Chart.defaults.global.defaultFontFamily = "Verdana";
// création du graphique
const oChart = new Chart(document.getElementById("canvas"), {
  "type": "line",
  "data": {
    "labels": ["", "", "", "", "", "", "", "", "", "", ""],
    "datasets": [{
      "backgroundColor": "#CDE",
      "borderColor": "#06A",
      "data": [-5, -5, -5, -5, -5, -5, -5, -5, -5, -5, -5]
    }]
  },
  "options": {
    "legend": {
      "display": false
    },
    "elements": {
      "line":  { "borderWidth": 1},
      "point": { "radius": 0}
    },
    "scales": {
      "xAxes": [{
        "ticks": {
          "fontSize": 20
        }
      }],
      "yAxes": [{
        "ticks": {
          "stepSize": ValeurMax /10,
          "max": ValeurMax,
          "min": 0                    // pour ne pas voir les valeurs négatives
        }
      }]
    }
  }
});
// update des données des séries
function updateDatas() {
  OffsetValeurs.forEach(function (offset) {
    // récup. valeur aléatoire
    let val = Math.floor(Math.random() * (ValeurMax - ValeurMin)) + ValeurMin;
    // change la valeur concernée
    oChart.data.datasets[0].data[offset] = val;
    // modifie la valeur affichée
    oChart.data.labels[offset] = val;
  });
  // redraw la Chart
  oChart.update();
}
// mise à jour données
updateDatas();
// lance la remise à jour
setInterval(updateDatas, 5000);
</script>
</body>
</html>

Cela ne devrait pas être loin de ce que tu cherches à faire

**Ted82700** · 29/11/2019, 16h08

Bonjour à vous,
j'ai une question bête est-ce possible d'utiliser plusieurs versions d'une même librairie au sein du même projet?
Exemple:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<script src="libv1.1">
       <script>
             script 1 
       <script/>
<script/>
 
<script src="libv2.1">
       <script>
             script 2
       <script/>
<script/>

Enfin c'est une vision schématique je ne sais pas s'il est possible de le faire.
Pour ça que je pose la question.

Merci beaucoup pour le coup de main, avec cette base je vais pouvoir l'ajuster pour mon projet, les librairies sont top pour avoir des templates et autre exemple mais par contre des que l'on sort des templates de base ça devient vraiment compliquer pour un débutant comme moi.
Si vous avez des pistes d'apprentissage pour etre plus à l'aise avec le Javascript ou des serveur discord ou autre groupe je prend avec plaisir.

**NoSmoking** · 29/11/2019, 17h26

j'ai une question bête est-ce possible d'utiliser plusieurs versions d'une même librairie au sein du même projet?

Tout est possible mais c'est fortement déconseillé, risque de conflit, duplication d'action ... oublie cela.

Si vous avez des pistes d'apprentissage pour etre plus à l'aise avec le Javascript

c'est en « JavaScriptant » que l'on devient « JavaScripteur », lecture de la documentation devenue nombreuse et souvent excellente, lecture des sources des bibliothèques, github par exemple, mais cela n'est pas toujours simple au début.

En cas de soucis il y a toujours les
✔ Forums sur Developpez
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript

Animation dynamique graphique linéaire basé sur 3 index (x) indépendants qui se recharge en 10min [Chart.js]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager