javascript - Morris line chart with php query data -
i'm developping curve through database data works great bu i'm having problem refreshing data dynamically, each time new value inserted in table want load automatically without refreshing page.
here index.php file :
<!doctype html > <html lang="en" > <head> <title> line chart </title> <meta charset="utf-8" > <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="/css/timeout.css" /> <link href="http://cdn.oesmith.co.uk/morris-0.4.1.min.css" rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <div id="output"> <div class="container"> <div id="morris-line-chart" class="results"></div> </div> </div> <?php include 'data.php'; } ?> <script> morris.line({ // id of element in draw chart. element: 'morris-line-chart', // chart data records -- each entry in array corresponds point // on chart. data: <?php echo $rows; ?>, // name of data record attribute contains x-values. xkey: 'cron_time', // list of names of data record attributes contain y-values. ykeys: ['images_processed'], // labels ykeys -- displayed when hover on // chart. labels: ['température'], linecolors: ['#0b62a4'], xlabels: 'hour', // disables line smoothing smooth: true, resize: true }); </script> </body> </html>
and page data.php:
<?php $rows = '['; //database define('db_host', 'localhost'); define('db_username', 'root'); define('db_password', ''); define('db_name', 'test'); //get connection $con = new mysqli(db_host, db_username, db_password, db_name); $query = "select * cron order id desc limit 0, 20"; $i=-1; $result = mysqli_query($con,$query); $total = $result->num_rows; foreach($con->query($query)as $p){ $i++; $id = $p['id']; $time = $p['cron_time']; $image = $p['images_processed']; if($i+1 == $total){ $rows = $rows.'{"id":"'.$id.'","cron_time":"'.$time.'","images_processed":"'.$image.'"}'; }else{ $rows = $rows.'{"id":"'.$id.'","cron_time":"'.$time.'","images_processed":"'.$image.'"},'; } } $rows= $rows.']'; //echo $rows; //$final = json_encode($result,fetch_assoc); //echo $rows; ?>
any help?????
Comments
Post a Comment