How to leave dynamic graphics with Google Harts?

Question

I have a problem in plotting my line chart using google Harts, when he does the search in the flock and populates my chart the same does not remove the oldest value, so keeps inserting and polluting the graph of data.

I used MAX and MIN within Options and nothing was done.

<script type="text/javascript">

        google.charts.load('current', {packages: ['corechart']});
        google.charts.setOnLoadCallback(draw);
        function draw(){
            drawBackgroundColor();
            drawToolbar();
        }
        function drawBackgroundColor(){
              var data = new google.visualization.DataTable();
              var data2 = new google.visualization.DataTable();

              data.addColumn('string', 'Horario');
              data.addColumn('number', 'Central');
              data.addColumn('number', 'Sala Baterias');
              data.addColumn('number', 'Nobreak');

              data2.addColumn('string', 'Horario');
              data2.addColumn('number', 'Central');
              data2.addColumn('number', 'Sala Baterias');
              data2.addColumn('number', 'Nobreak');
            
              //Captura os dados em JSON e monta o gráfico, de acordo com os dados.
              data.addRows( <?php echo $jsonTable ?>);
              data2.addRows( <?php echo $jsonTable2 ?>);


              //Opções do gráfico:  
              var options = {
                chart: {
                  title: 'Temperatura',
                },
                hAxis: {
                  title: 'Hora',
                  viewWindow: {

                    //min: 9,
                    //max: 16
                  }
                  
                },
                vAxis: {
                  title: 'Temperatura'
                },
                focusTarget : 'category',
                explorer: {
                actions: ['dragToZoom', 'rightClickToReset'], 
                axis: 'horizontal',
                
                keepInBounds: true,
                maxZoomIn: 4.0,
                maxZoomOut: 4.0
              }, 
              animation: {
                duration: 1000,
                easing: 'in'
              },
                colors: ['#a52714', '#097138', 'blue'],

                //pointsVisible: true
              };

              

              var options2 = {
                chart: {
                  title: 'Umidade',
                },
                hAxis: {
                  title: 'Hora'
                },
                vAxis: {
                  title: 'umidade'
                },
                colors: ['#a52714', '#097138', 'blue'],

                
              };


              var tempChart = new google.visualization.LineChart(document.getElementById('chart_div'));
              google.visualization.events.addOneTimeListener(tempChart, 'ready', function () {
                    
                    var umiChart = new google.visualization.LineChart(document.getElementById('chart_div2'));
                    umiChart.draw(data2, options2);
                });
              tempChart.draw(data, options);

        } 
      </script>

I wanted him to have a kind of animation (because there will be no interaction in it, only monitoring), in which, at each select in the database the graph "ran" the lines, I looked at the documentation of adding and eliminating Rows, but I was not successful. Below follows the Javascript I use.

Answer 1

Let me give you an example of how I make this kind of population of Google Maps: Usually populate using a connection to the database, but it is possible to do this using an array and a foreach:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Estado', 'Valor'],

<?php 

$estados=array("São Paulo"=>"15","Minas Gerais"=>"10","Bahia"=>"23");

foreach ($estados as $estado => $valor) {
    echo "['".$estado."',  ".$valor."],";
}

?>

        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

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

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

Basically what this code does is include an extrusion of data from array and display in the format used by Google Charts js. On account of foreach, while there is information in the array it will continue the loop by writing the data contained in the array within the Chart JS script itself.

This method I used above is valid for information returned in json, but before using foreach, in the case of json it may be necessary to use a json_decode to retrieve the information. If you need to see the data in order to write your script, use a var_dump().

For you to understand how it was the adaptation, take a look at the same script, but original that Google makes available, and see where exactly I put php to popular entries (https://developers.google.com/chart/interactive/docs/gallery/linechart)