实时数据图表不起作用

时间:2017-04-19 17:54:04

标签: javascript php html highcharts

大家好我正在研究实时java脚本图表来显示来自数据库的数据但我得到的并不是它没有从数据库中捕获数据

我使用这个PHP代码

   <?php

    header("Content-type: text/json");
   $servername = "localhost"; 
   $username = "root";  
   $password = "";
   $value = $_GET['value'];
   $date = time() * 1000;
   $ret = array($date, $value);
   echo json_encode($ret);
   $conn = mysql_connect($servername, $username, $password);
 if ($conn) {
 echo "Connected successfully";
} 
else {
 echo "connection failed";
} 
$conndb = mysql_select_db('database', $conn);
echo  "<br>";
$sql_insert ="insert into pulsesensor(value) values ('$value')";
if($sql_insert){
echo "insert successfull";
}
else {
echo "insert failed";
  }   echo  "<br>";
    $result = mysql_query($sql_insert);
     if($result){
         echo "insert successfull";
         }
         else {
         echo "insert failed" . mysql_error($result);
         }
        ?>

对于我使用此代码的实时图表

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>


    <div id="container" style="min-width: 310px; height: 400px; margin: 0 
     auto">
     </div>

/**
* Request data from the server, add it to the graph and set a timeout 
* to request again
*/
function requestData() {
   $.ajax({
    url: 'mysql0.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(point, true, shift);

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


$(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline',
        events: {
            load: requestData
        }
    },
    title: {
        text: 'Live Heartbeats data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150,
        maxZoom: 20 * 1000
    },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: [{
        name: 'heartbeats data',
         data: []
       }]
    });        
});
        </script>

结尾是enter image description here

0 个答案:

没有答案