Автообновление и прокрутка Google Graph

<?php
    $host = "localhost";
    $user = "user"; 
    $password = "pass";
    $dbname = "db";

    $con = mysqli_connect($host, $user, $password,$dbname);
    
    if (!$con) {
     die("Connection failed: " . mysqli_connect_error());
    }

    $chartQuery = "SELECT * FROM graph";
    $chartQueryRecords = mysqli_query($con,$chartQuery);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#chart_wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 1200px;
}
</style>
<div id="chart_wrapper">
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
</div>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['corechart'],
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
             ['Time', 'a', 'b', 'c'],
            <?php
                while($row = mysqli_fetch_assoc($chartQueryRecords)){
                    echo "['".date("Y-m-d H:i:s", substr($row['time'], 0, 10))."',".$row['a'].",".$row['b'].",".$row['c']."],";
                }
            ?>
        ]);

        var options = {
    hAxis: { title: "Время" },
    vAxis: { title: "Значение" },
    width: 1200,
    displayAnnotations: true
};

        var chart = new google.visualization.LineChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>

Есть вот такой код, который выводит графики значений по времени. В бд постоянно добавляются новые строки, как можно сделать автообовление графиков без перезагрузки страниц? И еще как сделать горизонтальную прокрутку относительно времени?