Bonjour j'ai actuellement deux graphiques qui sont statiques et je souhaites les faire devenir dynamique (tt les 3 secondes, ils se modifient aléatoirement par exemple)

Par exemple pour celui la, j'aimerais changer le numéro du palier et du coup modifier les battons verts si possible.

Script :

 <ul class="palliers" >
                            <li><div class="bar" style="height:5%" ></div></li>
                            <li><div class="bar" style="height:10%" ></div></li>
                            <li><div class="bar" style="height:15%" ></div></li>
                            <li><div class="bar" style="height:20%" ></div></li>
                            <li><div class="bar" style="height:25%" ></div></li>
                            <li><div class="bar" style="height:30%" ></div></li>
                            <li><div class="bar" style="height:35%" ></div></li>
                            <li><div class="bar" style="height:40%" ></div></li>
                            <li><div class="bar" style="height:45%" ></div></li>
                            <li><div class="bar" style="height:50%" ></div></li>
                            <li><div class="bar" style="height:55%" ></div></li>
                            <li><div class="bar" style="height:60%" ></div></li>
                            <li><div class="bar" style="height:65%" ></div></li>
                            <li><div class="bar" style="height:70%" ></div></li>
                            <li><div class="bar" style="height:75%" ></div></li>
                            <li><div class="bar" style="height:80%" ></div></li>
                            <li><div class="bar bar-empty" style="height:85%" ></div></li>
                            <li><div class="bar bar-empty" style="height:90%" ></div></li>
                            <li><div class="bar bar-empty" style="height:95%" ></div></li>
                            <li><div class="bar bar-empty" style="height:100%" ></div></li>
                        </ul>

Et le second qui est celui ci et je souhaiterais aussi qu'il devienne dynamique

script :

<ul class="palliers temperature" >
                            <li class="limiter"></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:60%" ></div></li>
                            <li><div class="bar blue-bar" style="height:65%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:73%" ></div></li>
                            <li><div class="bar blue-bar" style="height:74%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:76%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:68%" ></div></li>
                            <li><div class="bar blue-bar" style="height:61%" ></div></li>
                            <li><div class="bar blue-bar" style="height:60%" ></div></li>
                            <li><div class="bar blue-bar" style="height:61%" ></div></li>
                            <li><div class="bar blue-bar" style="height:64%" ></div></li>
                            <li><div class="bar blue-bar" style="height:68%" ></div></li>
                            <li><div class="bar blue-bar" style="height:70%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                            <li><div class="bar blue-bar" style="height:76%" ></div></li>
                            <li><div class="bar blue-bar" style="height:74%" ></div></li>
                            <li><div class="bar blue-bar" style="height:75%" ></div></li>
                        </ul>

Voila donc si quelqu’un peut m'aider ça serait grave cool. Merci à ceux qui prendront le temps de lire et de répondre à mon message

Nathan

setInterval(function() {
   var nb = $('.bar').length - 1;
   var select = Math.floor(Math.random() * nb);
   $('.bar').removeClass('bar-empty');
   $('.bar:gt(' + select + ')').addClass('bar-empty');
}, 3000);

setInterval(function() {
	$('.bar').each(function() {
  	var bar = Math.floor(Math.random() * 100);
    $(this).css('height', bar +'%');
  });
}, 3000);

Attention il faut bien penser à inclure JQuery

-
Edité par BoNux 22 juin 2018 à 12:02:56

BoNux a écrit:

Pour créer un timer qui met à jour toutes les barres :

Graph 1 :

setInterval(function() {
   var nb = $('.bar').length - 1;
   var select = Math.floor(Math.random() * nb);
   $('.bar').removeClass('bar-empty');
   $('.bar:gt(' + select + ')').addClass('bar-empty');
}, 3000);

Graph 2:

setInterval(function() {
	$('.bar').each(function() {
  	var bar = Math.floor(Math.random() * 100);
    $(this).css('height', bar +'%');
  });
}, 3000);

Attention il faut bien penser à inclure JQuer

Merci bcp ça m'a grandement aidé !