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>

Joellajoelle

so you want an html page that does an auto-refresh on its own, or when data changes in mysql? – Ultimatum

I'm not familiar with ZingChart if it support AJAX, but consider using it instead of reloading entire page. Some JS tools are AJAX aware so you can implement an API for it to get an update upon a timer or something. – Tokay

@Ultimatum the page will not refresh entirely but only the charts , and yes after a set interval of 10 second not when the data changes in mysql – Joellajoelle

@Tokay I have tried AJAX but that is too much of code , this api it self gives the refresh feature but i am not able to use it according to requirement , Thanks for the help though – Joellajoelle

Here is the ambiguity: (1) "But after some interval when the database is updated how to load the latest data ?" vs "and yes after a set interval of 10 second not when the data changes in mysql" (2) why not just reload the whole page every 10 seconds regardless of anything, even if " the page will not refresh entirely but only the charts" .... is it that you don't want a page reload? (3) Is it that the "this api it self gives the refresh feature but i am not able to use it according to requirement" because it doesn't work the way you try to use it or some other reason? – Ultimatum

@Ultimatum I was not able to deliver correctly let me try again - I dont want to refresh page , but only update the charts after interval of 10 second . The api gives auto refresh ( for charts ) feature but i am not able to understand how to use it . – Joellajoelle

Could you provide a sample returned by feed.php? It looks like a built-in refresh mechanism expects a single value per call to append. However you are having a loop of some sort in your code. – Tokay

You are right it works on single value per call . But I want that data to be fetch from database and then this data will be the refresh value in chart , how to do this ? – Joellajoelle

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.

Brick