Автор Тема: построить на сайте динамический график Highcharts используя AJAX, MySQL,PHP, jqu  (Прочитано 1082 раз)

06 Ноябрь, 2017, 07:06:28

Оффлайн Алпыспаев_Арм

  • Школьник
  • *
  • Сообщений: 1
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 61.0.3163.100 Chrome 61.0.3163.100
    • Просмотр профиля
Добрый день!
Есть база данных: значение температуры и время добавления значения температуры от датчика.
Цель: построить на сайте динамический график, который обновляется автоматический без перезагрузки сайта. Надо использовать график Highcharts используя AJAX, MySQL,PHP, jquery, JS. Я написал программу, но там ошибка!
Помогите пожалуйста
Ниже код index.php

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Highcharts from database</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

        <script type="text/javascript" src="http://www.highcharts.com/js/modules/exporting.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/js/themes/gray.js"></script>
        <script type="text/javascript" src="http://www.highcharts.com/js/main.js"></script>
 </head>
    <body>
    <h1>Highcharts from database</h1>

    <div id="container" style="width:100%; height:400px;"></div>

</body>
</html>

[table]
[tr]
[td]<script type="text/javascript">

var chart;
/**
 * Request data from the server, add it to the graph and set a timeout
 * to request again
 */
 $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Random data from database'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });       
});

/**
 * Request data from the server, add it to the graph and set a timeout
 * to request again
 */
function requestData() {
    $.ajax({
        url: 'db.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 5; // 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, 2000);   
        },
        cache: false
    });
}
   
</script>



Код для получения данных из базы данных:

<?php
 
//connection information
//address of the server where db is installed
$servername "localhost";
//username to connect to the db
//the default value is root
$username "root";
//password to connect to the db
//this is the value you specified during installation of WAMP stack
$password "";
//name of the db under which the table is created
$dbName "mybase";
//name of the port where we have sqldb
$port 3306;
//establishing the connection to the db.
$conn = new mysqli($servername$username$password$dbName$port);
//checking if there were any error during the last connection attempt
if ($conn->connect_error) {
  die(
"Connection failed: " $conn->connect_error);
}
 
$sql "(SELECT (UNIX_TIMESTAMP(timestampx)*1000) AS time ,IFNULL(temperature,'null')AS temperature
                FROM mylog ORDER BY timestampx DESC LIMIT 20) ORDER BY time ASC"
;
$result $conn->query($sql);
 
if (
$result->num_rows>0){
$count =0;
echo 
'[';
while(
$row=$result->fetch_assoc()){      
      echo 
'['.$row["time"].',' .$row["temperature"].']';
      
$count++;
       if (
$count<"20"){
       echo 
',';
       }      
     }
     echo 
']';
}else{
echo 
"[[],[]]";
}
$conn->close();
?>
« Последнее редактирование: 06 Ноябрь, 2017, 07:09:40 от Алпыспаев_Арм »

Форум вебмастеров - Webmasters.BY


06 Ноябрь, 2017, 10:11:25
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4938
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 56.0 Firefox 56.0
    • Просмотр профиля