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...

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

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager