ZingChart, how to download the latest data after some schedule of intervals and updates

Question

I am using ZingChart. When the page loads, the map successfully loads data from the MySql database. But after a certain interval, when the database is updated, how to load the latest data? Please help me. I tried the following code on 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 on 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

In your zingchart.render () method, use the dataurl parameter instead of the data parameter 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 a connection and extract the values. Once you have the values ​​in the array of PHP variables, use join() to combine the values ​​with a comma and set between the brackets so that the data is formatted in such a way that ZingChart understands (as a JavaScript array):

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

Then from the same script, select the entire JSON configuration that will be used in the diagram:

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

It is important to note that the "type" property is set to "full" to allow the graph to be completely updated, rather than pulling values ​​one by one.

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

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