ZingChart how to load latest data after some interval and update chart

Question

I am using ZingChart . At loading of the page the chart successfully loads the data from MySql database . But after some interval when the database is updated how to load the latest data ? Please help me out . I have tried the following code in my index.php page to do this but it does not work.

<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>

and using this code in 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

In your zingchart.render() method, use the dataurl option instead of the data option, and set it to the location of your PHP script in which you connect to your database.

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

Now, in feed.php, create the connection and retrieve the values. Once you have your values in a PHP variable array, use join() to join the values with a comma, and set between brackets so that the data is formatted in a way that ZingChart understands (as a JavaScript array):

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

Then, from the same script, echo out the complete JSON configuration to be used in the chart:

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

The important thing to note is that the "type" property is set to "full" to allow for a full chart refresh, instead of pulling in values one by one.

I have added this demo to the ZingChart-Demos repository on Github for your perusal.

I'm on the ZingChart team, so let me know if you need any more help.