Google Chart vacillante sur la charge de données consécutives

Question

J'ai ce morceau de code pour JavaScript charger un tableau Google:

<script type="text/javascript"> 
    google.charts.load('current', {'packages':['line']}); 
    setInterval(drawChart, 1000); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "getData.php", 
      dataType:"json", 
      async: false 
     }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

     var options = { 
      chart: { 
       title: 'Box Office Earnings in First Two Weeks of Opening', 
       subtitle: 'in millions of dollars (USD)' 
      }, 
      width: 900, 
      height: 500 
     }; 

     var chart = new google.charts.Line(document.getElementById('chart')); 

     chart.draw(data, options); 
    } 
</script> 

Ce code charge les données à partir d'un point de terminaison Restful pour dessiner le graphique. Le fait est que comme il s'agit d'un graphique pour surveiller les variables distantes, il doit continuellement se rafraîchir lui-même pour récupérer et afficher les données les plus récentes. Cela fonctionne bien et les données sont récupérées et affichées correctement, mais le graphique scintille indéfiniment, alors que puis-je faire pour éviter que le graphique n'effleure chaque chargement de données?

Merci d'avance.

Answer 1

pour éviter « vacillante », enregistrez une référence au tableau,

et dessiner la même carte avec de nouvelles données

au lieu de créer une nouvelle carte à chaque fois que

aussi, assurez-vous de attendre sur le 'callback' avant dessin

graphiques

et recommande fortement pas en utilisant async: false sur le $.ajax appel

recommande la configuration comme suit ...

google.charts.load('current', { 
    callback: function() { 
    var chart = null; 

    var options = { 
     chart: { 
     title: 'Box Office Earnings in First Two Weeks of Opening', 
     subtitle: 'in millions of dollars (USD)' 
     }, 
     width: 900, 
     height: 500 
    }; 

    drawChart(); 
    setInterval(drawChart, 1000); 

    function drawChart() { 
     $.ajax({ 
     url: "getData.php", 
     dataType:"json", 
     }).done(function (jsonData) { 

     var data = new google.visualization.DataTable(jsonData); 

     if (chart==null) 
      chart = new google.charts.Line(document.getElementById('chart')); 

     chart.draw(data, options); 

     }).fail(function (jq, text) { 
     console.log(text); 
     }); 
    } 
    }, 
    packages: ['line'] 
}); 

Note: recommander également pas en utilisant un Matériel graphique, several options don't work

autrement, ce serait un scénario idéal pour introduire animation