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页面中使用此代码

<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团队的成员,如果您需要更多帮助,请告诉我.