实时数据源不会出现在HighChart中

时间:2016-01-25 08:33:35

标签: javascript php json highcharts

我正在尝试从传感器向高清图添加实时值以创建实时数据Feed。

如果我手动提供数据,但是当传感器数据到来时它不起作用,它正在工作。数据库正在保存在数据库中,但它们没有显示在图表上。

如果有其他方法,请建议我。

add_data.php

<?php
session_start();
    // Connect to MySQL
    include './connection.php';

    // Substring function definition

    function get_string_between($string, $start, $end)
    {
        $string = ' ' . $string;
        $ini = strpos($string, $start);
        if ($ini == 0) return '';
        $ini += strlen($start);
        $len = strpos($string, $end, $ini) - $ini;
        return substr($string, $ini, $len);
    }    


    // Collect value datas from packet using substring

    $packet=$_GET["data_packet"];

    $temp_s = floatval(get_string_between($packet, 'ttt', 'ppp'));
    $pressure_s = floatval(get_string_between($packet, 'ppp', 'end'));
    $device = get_string_between($packet, 'dev', 'ttt');

    //convert to float

    if($temp_s!=0 && $pressure_s!=0  && $device!=0)
    {
    if ($device==1)
    {

    $SESSION["temp"] = $temp_s;
    $SESSION["pressure"] =$pressure_s;
        $query = "INSERT INTO machine_1 VALUES('".$SESSION["temp"] ."','".$SESSION["pressure"]."',DEFAULT)"; 
                include './press_m1.php';   
                include './temp_m1.php';
                //echo $temp;

    }

    elseif($device==2) 
    {
        // Enter datas into machine 2 table 
        $_SESSION["temp1"] = $temp_s;
    $_SESSION["pressure2"] =$pressure_s;
        $query = "INSERT INTO machine_2 VALUES ('".$_SESSION["temp1"]."','".$_SESSION["pressure2"]."',DEFAULT)";    
        include './press_m2.php';   
        include './temp_m2.php';
    }
    else
    {
        echo "Eror:404";
    }

    }
    // Execute SQL statement

    if(!mysqli_query($con,$query))
  {
  die('Error: ' . mysqli_error($con));
  }
    mysqli_close($con);   
?>

temp_m1.php

<?php
session_start();
?>
<?php   

        header("Content-type: text/json");
                // The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
                $x = time() * 1000;
                $y = $_SESSION["temp"];
                // Create a PHP array and echo it as JSON
                $ret = array($x, $y);
                echo json_encode($ret);

?>

press_m1.php

<?php
session_start();
?>
<?php

        header("Content-type: text/json");
                // The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
                $x = time() * 1000;
                // The y value is a random number
                $z =$_SESSION["pressure"];
                // Create a PHP array and echo it as JSON
                $retn = array($x, $z);
                echo json_encode($retn);

?>

chart.php

<?php
include './header.php';
?>
    <?php
include './site_top.php';
?>
        <!-- ####################################################################################################### -->
        <?php
        include './menu.php';
        ?>


    <script>
        var chart;
        var chart1; // global

        /**
         * Request data from the server, add it to the graph and set a timeout to request again
         */
        function requestDataOne() {
            $.ajax({
                url: 'temp_m1.php', 
                success: function(point) {
                    var series = chart.series[0],
                        shift = series.data.length > 20; // shift if the series is longer than 20

                    // add the point
                    chart.series[0].addPoint(eval(point), true, shift);

                    // call it again after one second
                    setTimeout(requestDataOne, 1000);   
                },
                cache: false
            });
        }

        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'temp',
                    defaultSeriesType: 'spline',
                    events: {
                        load: function() {
    chart = this; // `this` is the reference to the chart
    requestDataOne();
}
                    }
                },
                title: {
                    text: 'Live Temparature data'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 20 * 1000
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Value',
                        margin: 80
                    }
                },
                series: [{
                    name: 'Temparature',
                    data: []
                }]
            });     
        });
         // global

        /**
         * Request data from the server, add it to the graph and set a timeout to request again
         */
        function requestDataTwo() {
            $.ajax({
                url: 'press_m1.php', 
                success: function(point) {
                    var series = chart1.series[0],
                        shift = series.data.length > 20; // shift if the series is longer than 20

                    // add the point
                    chart1.series[0].addPoint(eval(point), true, shift);

                    // call it again after one second
                    setTimeout(requestDataTwo, 1500);   
                },
                cache: false
            });
        }

        $(document).ready(function() {
            chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'pres',
                    defaultSeriesType: 'spline',
                    events: {
                        load: function() {
    chart1 = this; // `this` is the reference to the chart
    requestDataTwo();
}
                    }
                },
                title: {
                    text: 'Live Pressure data'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 20 * 1000
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Value',
                        margin: 80
                    }
                },
                series: [{
                    name: 'pressure',
                    data: []
                }]
            });     
        });
        </script>

        <div class="wrapper row4">
        <div id="container" class="clear"> 
        <div class="row">
        <div id="temp" > </div>
        </div>
        <div class="row">
        <div id="pres" ></div>
        </div>
        </div>
        </div>

         <?php
        include './footer.php';
        ?>

0 个答案:

没有答案