javascript - 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" 以允许完整的图表刷新，而不是通过一个。

我已将此演示添加到 ZingChart-Demos repository on Github for your perusal .

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