ZingChart如何在一段时间后加载最新数据并更新图表

Question

我用的是ZingChart。在加载页面时，图表成功地从MySql数据库加载数据。但是，在数据库更新一段时间后，如何加载最新的数据?请帮帮我。我已经尝试了以下代码在我的index.php页面做到这一点，但它不工作。

<script>
  
   var myData=[
	<?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(){
	
	
	window.alert(myData);
	 zingchart.render({
	   id:'chartDiv',
  
  data:{
        "type":"bar",
		
        "scale-x":{
            "values":myLabels,
        },
        "series":[
            {
                "values":myData
            }
    ]
	,
	  "refresh":{
    "type":"feed",
    "transport":"http",
    "url":"feed.php?",
    "interval":200
		},
    }
    });
}
</script>

和在feed.php page

中使用此代码

<script>
 
   
    var myData=[
	<?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'].'"'.',';
 }?>"];
      
            }
]
	
    </script>

Answer 1

在zingchart.render()方法中，使用dataurl选项而不是data选项，并将其设置为连接到数据库的PHP脚本的位置。

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

现在，在feed.php中创建连接并检索值。一旦你在PHP变量数组中有了你的值，使用join()用逗号连接这些值，并在括号之间设置，以便数据以ZingChart理解的方式格式化(作为JavaScript数组):

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

然后，从同一个脚本中，回显出图表中使用的完整JSON配置:

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

需要注意的重要事情是，"type"属性被设置为"full"，以允许完整的图表刷新，而不是逐个拉入值。

我已经将这个演示添加到Github上的ZingChart-Demos存储库中，供您阅读。

我是ZingChart团队的一员，如果你需要更多的帮助，请告诉我。