ZingChart, jak załadować najnowsze dane po pewnym odstępie czasu i zaktualizować wykres

Question

Używam ZingChart. Podczas ładowania strony wykres pomyślnie ładuje dane z bazy danych MySql. Ale po pewnym czasie, kiedy baza danych jest aktualizowana, jak załadować najnowsze dane? Proszę pomóż mi . Próbowałem tego kodu na mojej stronie index.php, aby to zrobić, ale to nie działa.

<script> 
 
    
 
    var myData=[ 
 
\t <?php 
 

 

 
$conn =mysql_connect("localhost","root","") or die ("we couldn't connect!"); 
 
mysql_select_db("webauth"); 
 
$rs = mysql_query("SELECT * FROM test") or die(mysql_error()); 
 
while($row = mysql_fetch_array($rs)) 
 
{ 
 
     echo $row['label'].','; 
 
}?>]; 
 
    
 
    var myLabels=[<?php 
 

 

 
$conn =mysql_connect("localhost","root","") or die ("we couldn't connect!"); 
 
mysql_select_db("webauth"); 
 
$rs = mysql_query("SELECT * FROM test") or die(mysql_error()); 
 
while($row2 = mysql_fetch_array($rs)) 
 
{ 
 
     echo '"'.$row2['value'].'"'.','; 
 
}?>]; 
 

 

 

 
window.onload=function(){ 
 
\t 
 

 
\t 
 
\t window.alert(myData); 
 
\t zingchart.render({ 
 
\t id:'chartDiv', 
 
    
 
    data:{ 
 
     "type":"bar", 
 
\t \t 
 
     "scale-x":{ 
 
      "values":myLabels, 
 
     }, 
 
     "series":[ 
 
      { 
 
       "values":myData 
 
      } 
 
    ] 
 
\t , 
 
\t "refresh":{ 
 
    "type":"feed", 
 
    "transport":"http", 
 
    "url":"feed.php?", 
 
    "interval":200 
 
\t \t }, 
 
    } 
 
    }); 
 

 
} 
 
</script>

i za pomocą tego kodu w feed.php stronie

<script> 
 
    
 
    
 

 

 
    var myData=[ 
 
\t <?php 
 
?> 
 
     
 
[ 
 
    { 
 
     
 
$conn =mysql_connect("localhost","root","") or die ("we couldn't connect!"); 
 
mysql_select_db("webauth"); 
 
$rs = mysql_query("SELECT * FROM test") or die(mysql_error()); 
 
while($row = mysql_fetch_array($rs)) 
 
{ 
 
     "plot<?php echo $row['label'].','; 
 
}?>"]; 
 
    
 
     } 
 
] 
 

 
    
 
    var myLabels=[<?php 
 
?> 
 
     
 
     [ 
 
    { 
 

 
$conn =mysql_connect("localhost","root","") or die ("we couldn't connect!"); 
 
mysql_select_db("webauth"); 
 
$rs = mysql_query("SELECT * FROM test") or die(mysql_error()); 
 
while($row2 = mysql_fetch_array($rs)) 
 
{ 
 
     "plot<?php echo '"'.$row2['value'].'"'.','; 
 
}?>"]; 
 
     
 
      } 
 
] 
 
\t 
 
    </script>

Answer 1

W metodzie swojej zingchart.render(), należy wybrać opcję dataurl zamiast opcji danych i ustaw ją na l ocation twojego skryptu PHP, w którym łączysz się z twoją bazą danych.

window.onload=function(){ 
    zingchart.render({ 
    id:"myChart", 
    width:"100%", 
    height:400, 
    dataurl:'feed.php' 
    }); 
}; 

Teraz, w pliku feed.php, utwórz połączenie i pobierz wartości. Gdy masz swoje wartości w PHP zmiennej tablicy, użyj join() przyłączyć się do wartości z przecinkiem i ustaw w nawiasach tak, że dane są sformatowane w taki sposób, że ZingChart rozumie (jako tablicy JavaScript):

$dates = '[' . join($date, ',') . ']'; 
$values = '[' . join($series, ',') . ']'; 

Następnie z tego samego skryptu, echo pełną konfigurację JSON, który będzie używany w wykresie:

echo ' 
    { 
    "type" : "line", 
    "refresh" : { 
     "type" : "full", 
     "interval" : 10 
    }, 
    "scale-x":{ 
     "values":' . $dates . ', 
     "transform":{ 
     "type":"date", 
     "all":"%m/%d/%y" 
     } 
    }, 
    "series" : [ 
     { 
     "values" : ' . $values . ' 
     } 
    ] 
    }'; 

ważne jest, aby pamiętać, jest to, że nieruchomość "type" jest ustawiony na "full" celu umożliwienia pełnego wykresu odświeżania, zamiast ciągnąć wartości jeden po drugim.

Dodałem to demo do ZingChart-Demos repository on Github for your perusal.

Jestem członkiem zespołu ZingChart, więc daj mi znać, jeśli potrzebujesz dodatkowej pomocy.