How to show REALTIME chartjs of specific ID in mysql when click on corresponding marker on googlemap javascript

I’m a electrical student doing my graduation thesis on "MONITORING BUILDING ELECTRICTY REALTIME USING GOOGLEMAP JAVASCRIPT API"

So what I want to ask is that what code should I use so that everytime I click on a marker (which has a specific key as "STT" in MYSQL, it will show exactly the realtime chartjs of that ID marker next to the map

Here is what it’s supposed to be

<a href="https://drive.google.com/file/d/1huF5HHxIFQ_nUfg2sUFaDE76Y7UvOp4w/view?usp=sharing"></a>

The chartjs bellow is realtime with setinterval function(), but I can only do it with 1 ‘STT’

I’ve got stucked to find the way to call the realtime chartjs of each maker when clicked….. I wish to show the chart like the way I click the markers to show their own information in the "inforwindow" which using the AJAX…

Here is the (ajax.php), each time I click a maker with a specific STT (declared ), it will show info in a infowindow of that marker

<pre> <?php
    $sql = mysqli_connect('localhost','root','','viethuynh');
    $db = mysqli_select_db($sql,'THONGSO'); 
mysqli_query($sql,"SET NAMES 'utf8'");
if($_GET['stt']){
$result=array();
$ajax = mysqli_query($sql,"SELECT * FROM THONGSO WHERE STT={$_GET['stt']} ORD   ER BY THOIGIAN Desc");
$row = $ajax->fetch_array(MYSQLI_ASSOC);
echo json_encode(array('status'=>1, 'hi'=>$row));
}
else{
echo json_encode(array('status'=>0, 'hi'=>null));
}
exit;?>

Here is a part of INDEX.php the Responsecontainer div will contain the map and with set interval to load from data.php

<pre><script type="text/javascript">
var refreshId = setInterval(function()
{
    $('#responsecontainer').load('data.php');
    $('#alarmcontainer').load('alarm.php');

}, 2000);   
 </script>
 <div class="container">
   <div id="responsecontainer"> </div>  
 </div>
 <script>
   var chitiet23 = [
    {lat: 10.794700166183983, lng: 106.72211611533994, stt:1 },//landmark 1
    {lat: 10.794039928032047, lng: 106.72119507244005, stt: 2},//landmark 2
    {lat: 10.794965423476151, lng: 106.7205907214612, stt: 3},//landmark 3
    {lat: 10.795388608948297, lng:  106.72033981464217, stt: 4},//landmark 4 
    {lat: 10.796284577174639, lng: 106.72045262550873, stt: 5},//landmark 5
    {lat: 10.796435865523902, lng: 106.72181569793783, stt: 6},//landmark 6
     ];

     function getInfor2(marker, map, init) { 
          var list=[];
            $.ajax({
              url: "ajax.php?stt="+init.stt,
              type: "GET",
              dataType: "json",
              success: function(temp)
              { 
                if(temp.status==1){
                  var result= temp.hi;
                  list[init.stt] = '<div id="test">' +
                        '<h4 style="color:blue;">Thông Tin Chi Tiết: </h4>' +
                        '<ul style="color:black; font-weight:bold;">' +
                        '<li> TÊN TÒA NHÀ: '+result.ID+'</li>' +                     
                        '<li> STT : ' +result.STT+'</li>' +                          
                        '<li> Thời gian ghi: '+result.THOIGIAN+'</li>' +
                        '<li> Điện năng tiêu thụ (KWh): '+result.DIENNANG+'</li>' +
                        '<li> Tổng tiền điện (VND): '+result.DIENNANG*5000+'</li>' +
                        '</ul>' +    '</div>' ;
              }
   else{alert('dữ liệu không tồn tại trong hệ thống');}
              }
            }); 

            google.maps.event.addListener(marker, 'click', function () 
            { 
              infowindow.setContent(list[init.stt]);
              infowindow.open(map, marker);                 
              var string = '<div id="responsecontainer"></div>';
              document.getElementById('after').innerHTML = (list[init.stt] + string);
            });
       }
  </script>

Here is data.php to get data for chartjs

<pre><?php
  include "config.php";

  $x_thoigian= mysqli_query($conn, 'SELECT THOIGIAN FROM ( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  $y_FRE= mysqli_query($conn, 'SELECT FRE FROM( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  $y_VOL= mysqli_query($conn, 'SELECT VOL FROM( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  $y_AMP= mysqli_query($conn, 'SELECT AMP FROM ( SELECT * FROM THONGSO WHERE STT= 1 ORDER BY THOIGIAN DESC LIMIT 5) Var1 ORDER BY THOIGIAN ASC');
  ?>



    <div class="panel panel-primary" style="position: relative; height: 50vh; width:40vw;">
    <div class="panel-heading">
      <h3 class="panel-title"><center>BIỂU ĐỒ REALTIME</h3>
    </div>

    <canvas id="myChart" > </canvas>
    <script>
       var canvas = document.getElementById('myChart').getContext('2d');
       var data = {
        labels: [<?php while ($b = mysqli_fetch_array($x_thoigian)) { echo '"' . $b['THOIGIAN'] . '",';}?>],
        datasets: [
        {
            label: "TẦN SỐ",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(105, 0, 132, .2)",
            borderColor: "rgba(200, 99, 132, .7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(200, 99, 132, .7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(200, 99, 132, .7)",
            pointHoverBorderColor: "rgba(200, 99, 132, .7)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [<?php while ($b = mysqli_fetch_array($y_FRE)) { echo  $b['FRE'] . ',';}?>],
          },
          ]
       };

        var option = 
      {
         showLines: true,
         animation: {duration: 0}

        };
    
       var myLineChart = Chart.Line(canvas,{
          data:data,
          options:option
         });

         </script>          
        </div>