Строить динамический HIGHCHARTS график из данных от MySQL AJAX, JSON

Тема в разделе "ESP8266, ESP32", создана пользователем Augan, 3 ноя 2017.

  1. Augan

    Augan Нуб

    Добрый день!

    Хочу построить динамический HIGHCHARTS график, который обновляется без перезагрузки сайта. Данные для графика надо извлекать из базы данных. При построении возникли проблемы. Помогите исправить ошибки. Может кто-нибудь сталкивался с такой проблемой.
    Ниже моя главная страница

    HTML:
    <!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>
    </head>
        <body>
        <h1>Highcharts from database</h1>

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

        </body>
    </html>

    <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: 'linear', //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 > 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
        });
    }

    </script>
    Код для извлечения данных из MySQL:

    PHP:
    <?php
    // Set the JSON header
            header("Content-type: text/json");

            $mysqli = new mysqli("localhost", "root", "", "mybase");
            $mysqli -> query("SET NAMES 'utf8'");
     
            if ($mysqli->connect_error) {
                echo("Connection failed: " . $mysqli->connect_error);}
            else
                echo "Connection Ready\n\n";

        $data = array();
        $result = $mysqli -> query("SELECT AddDate,temp FROM sensor ORDER BY AddDate ASC");
        while(($row = $result->fetch_assoc()) != false){
            $data[] = array($row['AddDate'],$row['temp']);
        }
        echo json_encode($data);
    ?>
    А вот код который добавляет данные в базу данных:
    PHP:
    <?php

            $mysqli = new mysqli("localhost", "root", "", "mybase");
            $mysqli -> query("SET NAMES 'utf8'");
     
            if ($mysqli->connect_error) {
                echo("Connection failed: " . $mysqli->connect_error);
            }
            else
                echo "Connection Ready <br/>";
     
            for($i = 1; $i < 10; $i++){
                $y = rand(0, 100);
                $mysqli->query("INSERT INTO sensor (AddDate, temp) VALUES ('".time()."','$y')");
                sleep(2);
            }

    ?>
     
    Последнее редактирование: 3 ноя 2017
    Augan, 3 ноя 2017
    #1
  2. Igor68

    Igor68 Гуру

    Вот как пример (мне самому показали... так, что не ругайте):
    Код (Javascript):

    function loadFromUno() {

    var str;
    var xmlhttp = new XMLHttpRequest();
    //
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 ) {
    if(xmlhttp.status == 200){
    //
    uno_dat = xmlhttp.responseText;
    //document.getElementById("myDiv").innerHTML = uno_dat;
    dbs = eval('(' + uno_dat + ')');
    UnoParse();
    }
    //
    setTimeout(loadFromUno, 4000); // Вызвать снова через 4 сек
    }
    }
    //}
    //
    xmlhttp.open("GET", "uno_dat.php?dtime=" + new Date().getTime, true);
    //
    xmlhttp.send();
    }

    function UnoParse()
    {
    //mpc_com_ActTime
    document.getElementById("mpc_com_ActTime").innerHTML = dbs.mpc_com_ActTime;
    document.getElementById("mpc_com_ActDate").innerHTML = dbs.mpc_com_ActDate;
    document.getElementById("Taero_ext").innerHTML = dbs.Taero_ext;
    //
    fur1_ope_Weight = dbs.fur1_ope_Weight;
    fur2_ope_Weight = dbs.fur2_ope_Weight;
    document.getElementById("fur1_ope_Weight").innerHTML = "Масса загрузки(кг): " + fur1_ope_Weight;
    if(fur1_ope_Weight >= 900)
    {
    if(mas1simg != 6)
    document.getElementById("mass1").src = imgABB_mass[6].src;
    mas1simg = 6;
    }
    else if(fur1_ope_Weight >= 750)
    {
    if(mas1simg != 5)
    document.getElementById("mass1").src = imgABB_mass[5].src;
    mas1simg = 5;
    }
    else if(fur1_ope_Weight >= 500)
    {
    if(mas1simg != 4)
    document.getElementById("mass1").src = imgABB_mass[4].src;
    mas1simg = 4;
    }
    else if(fur1_ope_Weight >= 250)
    {
    if(mas1simg != 3)
    document.getElementById("mass1").src = imgABB_mass[3].src;
    mas1simg = 3;
    }
    else if(fur1_ope_Weight >= 100)
    {
    if(mas1simg != 2)
    document.getElementById("mass1").src = imgABB_mass[2].src;
    mas1simg = 2;
    }
    else if(fur1_ope_Weight >= 10)
    {
    if(mas1simg != 1)
    document.getElementById("mass1").src = imgABB_mass[1].src;
    mas1simg = 1;
    }
    else
    {
    if(mas1simg != 0)
    document.getElementById("mass1").src = imgABB_mass[0].src;
    mass1simg = 0;
    }
    //
    document.getElementById("fur2_ope_Weight").innerHTML = "Масса загрузки(кг): " + fur2_ope_Weight;
    if(fur2_ope_Weight >= 900)
    {
    if(mas2simg != 6)
    document.getElementById("mass2").src = imgABB_mass[6].src;
    mas2simg = 6;
    }
    else if(fur2_ope_Weight >= 750)
    {
    if(mas2simg != 5)
    document.getElementById("mass2").src = imgABB_mass[5].src;
    mas2simg = 5;
    }
    else if(fur2_ope_Weight >= 500)
    {
    if(mas2simg != 4)
    document.getElementById("mass2").src = imgABB_mass[4].src;
    mas2simg = 4;
    }
    else if(fur2_ope_Weight >= 250)
    {
    if(mas2simg != 3)
    document.getElementById("mass2").src = imgABB_mass[3].src;
    mas2simg = 3;
    }
    else if(fur2_ope_Weight >= 100)
    {
    if(mas2simg != 2)
    document.getElementById("mass2").src = imgABB_mass[2].src;
    mas2simg = 2;
    }
    else if(fur2_ope_Weight >= 10)
    {
    if(mas2simg != 1)
    document.getElementById("mass2").src = imgABB_mass[1].src;
    mas2simg = 1;
    }
    else
    {
    if(mas2simg != 0)
    document.getElementById("mass2").src = imgABB_mass[0].src;
    mas2simg = 0;
    }
    //
    mp1_fur_ope_Tilted = dbs.mp1_fur_ope_Tilted;
    mp2_fur_ope_Tilted = dbs.mp2_fur_ope_Tilted;
    if(mp1_fur_ope_Tilted == "1")
    {
    if(titled1 != 1)
    document.getElementById("mp1_fur_ope_Tilted").src = imgABB_titled[1].src;
    titled1 = 1;
    }
    else
    {
    if(titled1 != 0)
    document.getElementById("mp1_fur_ope_Tilted").src = imgABB_titled[0].src;
    titled1 = 0;
    }
    if(mp2_fur_ope_Tilted == "1")
    {
    if(titled2 != 1)
    document.getElementById("mp2_fur_ope_Tilted").src = imgABB_titled[1].src;
    titled2 = 1;
    }
    else
    {
    if(titled2 != 0)
    document.getElementById("mp2_fur_ope_Tilted").src = imgABB_titled[0].src;
    titled2 = 0;
    }
    //
    if(dbs.inv1_sta_IsOn == "1")
    document.getElementById("inv1_sta_IsOn").innerHTML = "ВКЛ.";
    else
    document.getElementById("inv1_sta_IsOn").innerHTML = "ВЫКЛ.";
    if(dbs.inv2_sta_IsOn == "1")
    document.getElementById("inv2_sta_IsOn").innerHTML = "ВКЛ.";
    else
    document.getElementById("inv2_sta_IsOn").innerHTML = "ВЫКЛ.";
    //
    document.getElementById("mp1_melt_ope_Temperature").innerHTML = "Температура плавки(Град): " + dbs.mp1_melt_ope_Temperature;
    document.getElementById("mp2_melt_ope_Temperature").innerHTML = "Температура плавки(Град): " + dbs.mp2_melt_ope_Temperature;
    //
    document.getElementById("mp1_melt_ope_ManPower").innerHTML = "Заданная мощность плавки(кВт): " + dbs.mp1_melt_ope_ManPower;
    document.getElementById("mp2_melt_ope_ManPower").innerHTML = "Заданная мощность плавки(кВт): " + dbs.mp2_melt_ope_ManPower;
    //
    document.getElementById("inv1_sta_Power").innerHTML = "Мощность инвертора(кВт): " + dbs.inv1_sta_Power;
    document.getElementById("inv2_sta_Power").innerHTML = "Мощность инвертора(кВт): " + dbs.inv2_sta_Power;
    //
    document.getElementById("mp1_melt_ope_RemainingTime").innerHTML = "Времени осталось: " + dbs.mp1_melt_ope_RemainingTime;
    document.getElementById("mp2_melt_ope_RemainingTime").innerHTML = "Времени осталось: " + dbs.mp2_melt_ope_RemainingTime;
    //
    document.getElementById("power_U_automatic").innerHTML = dbs.power_U_automatic;
    document.getElementById("power_F_automatic").innerHTML = dbs.power_F_automatic;
    //
    document.getElementById("inv1_sta_Voltage").innerHTML = dbs.inv1_sta_Voltage;
    document.getElementById("inv2_sta_Voltage").innerHTML = dbs.inv2_sta_Voltage;
    document.getElementById("inv1_sta_Current").innerHTML = dbs.inv1_sta_Current;
    document.getElementById("inv2_sta_Current").innerHTML = dbs.inv2_sta_Current;
    document.getElementById("inv1_sta_Frequency").innerHTML = dbs.inv1_sta_Frequency;
    document.getElementById("inv2_sta_Frequency").innerHTML = dbs.inv2_sta_Frequency;
    //
    document.getElementById("power_2_on").innerHTML = dbs.power_2_on;
    //
    document.getElementById("mp1_sin_ope_TempRef").innerHTML = "Спекание:зад.темп: " + dbs.mp1_sin_ope_TempRef;
    document.getElementById("mp2_sin_ope_TempRef").innerHTML = "Спекание:зад.темп: " + dbs.mp2_sin_ope_TempRef;
    document.getElementById("mp1_sin_ope_Temperature").innerHTML = "Спекание:изм.темп: " + dbs.mp1_sin_ope_Temperature;
    document.getElementById("mp2_sin_ope_Temperature").innerHTML = "Спекание:изм.темп: " + dbs.mp2_sin_ope_Temperature;
    document.getElementById("mp1_sin_ope_SinterTimeStr").innerHTML = "Спекание:прошедшее время: " + dbs.mp1_sin_ope_SinterTimeStr;
    document.getElementById("mp2_sin_ope_SinterTimeStr").innerHTML = "Спекание:прошедшее время: " + dbs.mp2_sin_ope_SinterTimeStr;
    document.getElementById("mp1_sin_ope_RemTimeString").innerHTML = "Спекание:оставшееся время: " + dbs.mp1_sin_ope_RemTimeString;
    document.getElementById("mp2_sin_ope_RemTimeString").innerHTML = "Спекание:оставшееся время: " + dbs.mp2_sin_ope_RemTimeString;
    document.getElementById("mp1_sin_ope_TotalTime").innerHTML = "Спекание:заданное время: " + dbs.mp1_sin_ope_TotalTime;
    document.getElementById("mp2_sin_ope_TotalTime").innerHTML = "Спекание:заданное время: " + dbs.mp2_sin_ope_TotalTime;
    //
    document.getElementById("abp_connect").innerHTML = dbs.abp_connect;
    document.getElementById("uno_connect").innerHTML = dbs.uno_connect;
    }
     
    Это вызов данных из сервера самой страницей и разбормоего JSON

    А Вот (в самом конце) запуск функции вызова в странице
    Код (Javascript):

    setInterval('loadFromUno()',1000);
     
    одним словом задаётся интервал и вызывается uno_dat.php из сервера страницей

    А вот тот самый PHP:
    Код (PHP):

    <?php
      $handle = fopen("ramdisk/json_data", "rt");
         $contents = '';
         while (!feof($handle))
           $contents .= fread($handle, 4096);
       fclose($handle);
       echo $contents;
    ?>
     
    Только тут я читаю содержимое файла в формате JSON.
    Простите, если что не так.
     
    Igor68, 3 ноя 2017
    #2