Динамически обновлять таблицу

Question

Я все еще учусь использовать Highchart для создания диаграммы с данными из MySQL.Мне удалось сделать график, используя Highstock (highchart).Затем я хочу, чтобы график обновлял данные без перезагрузки страницы.Как график может обновлять данные (точки построения графика), не перезагружая страницу?,У меня вопрос, как добавить точку из PHP без перезагрузки веб-страницы?

Мой график

Код Javascript:

$(function() {
  $.getJSON('stockTemp.php', function(data) {
    // Create the chart
    Highcharts.stockChart('stockTemp', {
      rangeSelector: {
        buttons: [{
          type: 'hour',
          count: 1,
          text: '1H'
        }, {
          type: 'hour',
          count: 24,
          text: '24H'
        }, {
          type: 'day',
          count: 7,
          text: '7D'
        }, {
          type: 'month',
          count: 1,
          text: '1M'
        }, {
          type: 'all',
          count: 1,
          text: 'All'
        }],
        selected: 1,
        inputEnabled: true
      },
      title: {
        text: 'Temperature'
      },
      yAxis: {
        opposite: false,

        title: {
          text: 'Temperature',
        },
        labels: {
          formatter: function() {
            return this.value + '°C';
          }
        }

      },
      series: [{
        name: 'Suhu',
        data: data,
        marker: {
          enabled: true,
          radius: 6,
          symbol: 'diamond'
        },

        shadow: true,
        tooltip: {
          valueDecimals: 2
        }
      }]
    });
  });
});

PHP код:

<?php 

include("connection.php");

$data = array();
$count = 0;
$result = mysqli_query($koneksi,"SELECT * FROM data ORDER BY time ASC ") or die ("Connection error");
while($row = mysqli_fetch_array($result)) {
  $x = strtotime($row['time']) * 1000; 
$y =    (float)$row['temperature'];
$data[] = array($x, $y);
$count++;
}
echo json_encode($data);
mysqli_close($koneksi);
?>

Спасибо за помощь.

Answer 1

Я пришел к выводу, что было бы лучше опубликовать отдельный ответ в этой теме. Чтобы достичь ожидаемого эффекта, вам нужно создать функцию setInterval внутри обработчика событий chart.events.load, и в этом интервале просто вызвать $.getJSON('stockTemp.php', function() ..., что сделает setData() для ряда, передающего данные, которые вы получил, когда getJSON удалось. Я знаю, звучит жутко, но это должно выглядеть примерно так:

$(function() {
  $.getJSON('stockTemp.php', function(data) {
    // Create the chart
    Highcharts.stockChart('stockTemp', {
      chart: {
        events: {
          load: function() {
            var chart = this
            setInterval(function() {
              $.getJSON('stockTemp.php', function(newData) {
                chart.series[0].setData(newData)
              }
            }, 5000) // Update the chart every 5 seconds
          }
        }
      },
      rangeSelector: {
        buttons: [{
          type: 'hour',
          count: 1,
          text: '1H'
        }, {
          type: 'hour',
          count: 24,
          text: '24H'
        }, {
          type: 'day',
          count: 7,
          text: '7D'
        }, {
          type: 'month',
          count: 1,
          text: '1M'
        }, {
          type: 'all',
          count: 1,
          text: 'All'
        }],
        selected: 1,
        inputEnabled: true
      },
      title: {
        text: 'Temperature'
      },
      yAxis: {
        opposite: false,

        title: {
          text: 'Temperature',
        },
        labels: {
          formatter: function() {
            return this.value + '°C';
          }
        }

      },
      series: [{
        name: 'Suhu',
        data: data,
        marker: {
          enabled: true,
          radius: 6,
          symbol: 'diamond'
        },

        shadow: true,
        tooltip: {
          valueDecimals: 2
        }
      }]
    });
  });
});

Справочник по API:

https://api.highcharts.com/highstock/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Series#setData