来自sql数据库的实时更新高图表

时间:2016-08-12 04:37:56

标签: php mysql highcharts

我有两个php文件data.php和gaschart.php,data.php从sql和gaschart.php中提取数据绘制高图。我希望实现这一点,这意味着每秒更新图表,数据库也会每秒更新一次。有人请帮我这个代码。任何人都可以告诉我如何为我的代码这里做.. ??

这是 data.php

  <?php
       $con = mysql_connect("localhost","shsas","");

    if (!$con) {
       die('Could not connect: ' . mysql_error());
               }

    mysql_select_db("shsas", $con);

   $sth = mysql_query("SELECT Gaslevel FROM gas");
   $rows = array();
   $rows['name'] = 'Gaslevel';
   while($r = mysql_fetch_array($sth)) {
   $rows['data'][] = $r['Gaslevel'];
   }

  $result = array();
  array_push($result,$rows);

  print json_encode($result, JSON_NUMERIC_CHECK);

  mysql_close($con);
  ?>

这是 gaschart.php

     <script type="text/javascript">
     $(function () {
     var chart;
     $(document).ready(function() {
     $.getJSON("data.php", function(json) {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25,
            },
            title: {
                text: 'Gas Level Detection',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                title: {
                    text: 'EventID'
                },

            },
            yAxis: {
                title: {
                    text: 'Level of gas'
                },

            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: json
               });
             });

         });

       });
    </script>

1 个答案:

答案 0 :(得分:0)

我强烈建议您尝试使用套接字。

您可以查看socket.io。虽然它是为聊天而开发的。我相信,你可以将它用于你的用例。

另外,请检查elephant.io。它更通用。一个轻松易用的库,旨在带来一些实时功能。您也可以为您的项目尝试此操作。在内部,它使用socket.io