Google Charts - Gauge Graph Animation funktioniert nicht

Ich versuche, einige GAUGE-Diagramme mit Google Graphen zu erstellen. Mein Ziel ist es, die Daten von einer PHP-Seite zu laden und eine automatische Aktualisierung zu haben. Ich konnte das tun, aber wenn die Daten aktualisiert werden, sind die Gauge-Linien nicht animiert, sondern sie werden neu gezeichnet. Ich würde die coole Animation gerne so sehen: https://jsfiddle.net/api/post/library/pure/. Eigentlich lade ich die Daten aus einer statischen Datei, dann erstelle ich die Daten aus einer MySQL-Datenbank (getestet und bearbeitet). Hier mein Code:Google Charts - Gauge Graph Animation funktioniert nicht

temperature.php

<html> 
<head> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['gauge']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 

     var jsonData = $.ajax({ 
     url: "http://URL/fetch_data3.php?type=gauge", 
     dataType:"json", 
     async: false 
    }).responseText; 


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

    var options = { 
     width: 600, height: 300, 
     redFrom: 35, redTo: 50, 
     yellowFrom: 24, yellowTo: 35, 
     greenFrom: 18, greenTo: 24, 
     majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10, 
     animation:{ 
     duration: 1000, 
     easing: 'inAndOut', 
     }, 
     max: 50, min: -10 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 

    chart.draw(data, options); 
    clearChart(); 

} 

setInterval(function() { 
    drawChart(); 
}, 5000); 

</script> 

</head> 
<body> 
<div id="chart_div" style="width: 500px; height: 400px;"></div> 
</body> 
</html>

und hier die fetch_data3.php

<?php 
if ($_REQUEST["type"] == "gauge") { 
    $sec = date('s'); 
if ($sec % 2 == 0) { 
    $string = file_get_contents("sampleData.json"); 
} else { 
    $string = file_get_contents("sampleData2.json"); 
} 
echo $string; 
} 
?>

sampleData.json:

{ 
    "cols": [ 
     {"id":"","label":"Label","pattern":"","type":"string"}, 
     {"id":"","label":"Value","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"Esterno","f":null},{"v":0,"f":null}]}, 
     {"c":[{"v":"Soggiorno","f":null},{"v":0,"f":null}]}, 
     {"c":[{"v":"Stanza","f":null},{"v":0,"f":null}]} 
     ] 
}

sampleData2.json:

{ 
    "cols": [ 
     {"id":"","label":"Label","pattern":"","type":"string"}, 
     {"id":"","label":"Value","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"Esterno","f":null},{"v":10,"f":null}]}, 
     {"c":[{"v":"Soggiorno","f":null},{"v":40,"f":null}]}, 
     {"c":[{"v":"Stanza","f":null},{"v":20,"f":null}]} 
     ] 
}

Der Graph lädt zufällig sampleData2.json oder sampleData.json, aber es gibt keine Anomation im Diagramm.

Was ist los?

Danke!

Simon

Quelle

2016-08-24 Simon

animiert https://jsfiddle.net/api/post/library/pure/ist leer :) –

Sorry, es basiert auf der Anomation in der Google-Dokument angezeigt: https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge – Simon

nach den supported modifications für ein Messgerät Diagramm,
Animation erfolgt nur, wenn ein Wert in den Daten

Änderungen seit dem Diagramm auf startup animiert nicht,
das Diagramm zieht anfänglich mit den auf min eingestellten Werten,
oder dem Wert, mit dem die Animation beginnen soll

dann verwenden, um einen einmal'ready' Ereignis-Listener das Diagramm mit den realen Daten
dies führt dazu, dass das Diagramm

siehe folgenden Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 

 
    setInterval(function() { 
 
     drawChart(); 
 
    }, 5000); 
 

 
    function drawChart() { 
 
     var initData = { 
 
     "cols": [ 
 
      {"id":"","label":"Label","pattern":"","type":"string"}, 
 
      {"id":"","label":"Value","pattern":"","type":"number"} 
 
     ], 
 
     "rows": [ 
 
      {"c":[{"v":"Esterno","f":null},{"v":-10,"f":null}]}, 
 
      {"c":[{"v":"Soggiorno","f":null},{"v":-10,"f":null}]}, 
 
      {"c":[{"v":"Stanza","f":null},{"v":-10,"f":null}]} 
 
     ] 
 
     }; 
 

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

 
     var options = { 
 
     width: 600, height: 300, 
 
     redFrom: 35, redTo: 50, 
 
     yellowFrom: 24, yellowTo: 35, 
 
     greenFrom: 18, greenTo: 24, 
 
     majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10, 
 
     animation:{ 
 
      duration: 1000, 
 
      easing: 'inAndOut' 
 
     }, 
 
     max: 50, min: -10 
 
     }; 
 

 
     var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
 

 
     google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
 
     var jsonData = { 
 
      "cols": [ 
 
      {"id":"","label":"Label","pattern":"","type":"string"}, 
 
      {"id":"","label":"Value","pattern":"","type":"number"} 
 
      ], 
 
      "rows": [ 
 
      {"c":[{"v":"Esterno","f":null},{"v":10,"f":null}]}, 
 
      {"c":[{"v":"Soggiorno","f":null},{"v":40,"f":null}]}, 
 
      {"c":[{"v":"Stanza","f":null},{"v":20,"f":null}]} 
 
      ] 
 
     }; 
 

 
     var data = new google.visualization.DataTable(jsonData); 
 
     chart.draw(data, options); 
 
     }); 
 

 
     chart.draw(data, options); 
 
    } 
 
    }, 
 
    packages:['gauge'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

animieren zu zeichnen

wie oben erwähnt, animieren die obigen Diagramme ...

von den voreingestellten Werten - zu den echten empfangenen Daten

um das Diagramm zu animieren ...

aus den vorherigen realen Daten - auf die neuen Daten erhielt

müßten Sie einen Verweis auf die chart
zu speichern, anstatt ein neues chart zu schaffen, wird jedes Mal es

gezogen

auch , empfehlen nicht async: false auf dem $.ajax
Anruf verwenden, um die success Handler statt

01.235.164 mit

empfehlen diese Einrichtung, die auf der anfänglichen Zieh mit Standardwerten
dann animieren aus den vorherigen Daten, auf die neuen Daten für jedes Intervall

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

    drawChart(); 

    setInterval(function() { 
     drawChart(); 
    }, 5000); 

    function drawChart() { 
     $.ajax({ 
     url: 'http://URL/fetch_data3.php?type=gauge', 
     dataType: 'json', 
     success: function (jsonData) { 
      var options = { 
      width: 600, height: 300, 
      redFrom: 35, redTo: 50, 
      yellowFrom: 24, yellowTo: 35, 
      greenFrom: 18, greenTo: 24, 
      majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10, 
      animation:{ 
       duration: 1000, 
       easing: 'inAndOut' 
      }, 
      max: 50, min: -10 
      }; 

      var data; 
      if (chart === null) { 
      chart = new google.visualization.Gauge(document.getElementById('chart_div')); 

      // data with min values 
      data = new google.visualization.DataTable({ 
       "cols": [ 
       {"id":"","label":"Label","pattern":"","type":"string"}, 
       {"id":"","label":"Value","pattern":"","type":"number"} 
       ], 
       "rows": [ 
       {"c":[{"v":"Esterno","f":null},{"v":-10,"f":null}]}, 
       {"c":[{"v":"Soggiorno","f":null},{"v":-10,"f":null}]}, 
       {"c":[{"v":"Stanza","f":null},{"v":-10,"f":null}]} 
       ] 
      }); 

      google.visualization.events.addOneTimeListener(chart, 'ready', function() { 
       data = new google.visualization.DataTable(jsonData); 
       chart.draw(data, options); 
      }); 
      } else { 
      data = new google.visualization.DataTable(jsonData); 
      } 

      chart.draw(data, options); 
     } 
     }); 
    } 
    }, 
    packages:['gauge'] 
});

Quelle

2016-08-24 13:57:03 WhiteHat

Danke funktioniert GROSS !! ! – Simon

Google Charts - Gauge Graph Animation funktioniert nicht

Antwort

Verwandte Themen