Ajout dynamique de graphiques avec le flot

Je cours le code suivant. Le bouton ajoute essentiellement un graphique dans la page HTML. Le problème auquel je suis confronté est le suivant: lorsque je clique sur le bouton pour la deuxième fois, la courbe de l'ancien graphique s'estompe (bien que les étiquettes ne le soient pas), et je veux qu'il reste. J'ai essayé de déboguer et cela se produit quand je modifie la propriété innerHTML juste au début de la fonction javascript buttonClicked. Quelqu'un peut-il me dire pourquoi cela se passe-t-il?Ajout dynamique de graphiques avec le flot

<html> 
<head> 
<title>Configurando gráficos</title> 
<script language="javascript" type="text/javascript" src="../scripts/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="../scripts/jquery.flot.js"></script> 
<script type="text/javascript" language="javascript"> 

var id = 0; 

function requestGraph(placeholder) { 
    $.ajax({url: "../requests/get_xml_oid.php?oid=1.3.6.1.2.1.2.2.1.10.65540&host=200.234.199.161", success: function(request){ 
     // Initialize dataToDraw to an empty array 
     var dataToDraw = []; 

     // The first tag is called ifInOctets  
     var ifInOctetsEl = request.getElementsByTagName("ifInOctets")[0]; 

     // Store the data element, to loop over the time-value pairs  
     var dataEl = ifInOctetsEl.getElementsByTagName("data"); 

     // For each data element, except the first one 
     var i; 
     for (i=1; i<dataEl.length; i++){ 
      // get the time-value pair 
      var timeEl = dataEl[i].getElementsByTagName("time")[0]; 
      var valueEl = dataEl[i].getElementsByTagName("value")[0]; 
      var time = timeEl.textContent; 
      var value = valueEl.textContent; 

      // get the value of the former data element 
      // Warning: the former value in the XML file is newer than the latter 
      var formerValueEl = dataEl[i-1].getElementsByTagName("value")[0]; 
      var formerValue = formerValueEl.textContent; 

      // push to the dataToDraw array 
      dataToDraw.push([parseInt(time)*1000, parseInt(formerValue) - parseInt(value)]); 

     } 

     // tell the chart that the x axis is a time variable 
     var options = { 
      xaxis: { mode: "time"} 
     }; 

     // plot the chart and place it into the placeholder 
     jQuery.plot(jQuery(placeholder), [dataToDraw], options); 

     }}); 
} 
function buttonClicked() { 
    document.getElementById("body").innerHTML += "<div id=\"placeholder" + id + "\" style=\"width:600px;height:300px;\"></div>"; 
    requestGraph("#placeholder" + id); 
    setInterval("requestGraph(\"#placeholder" + id + "\")",60000); 
    id = id + 1; 
} 

</script> 
</head> 
<body id="body"> 
<button type="button" onClick="buttonClicked()">Click Me!</button> 
</body> 
</html>

Source

2010-03-05 Thiago

Selon this previous question, l'affectation à innerHTML détruit les éléments enfants. Ce n'est pas clair pour moi que c'est exactement ce que vous voyez, mais peut-être en utilisant document.createElement comme suggéré dans la question similaire travaillera pour vous aussi.

Source

2010-03-05 19:15:27

Ajout dynamique de graphiques avec le flot

Répondre

Questions connexes