FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:

Diskuze: Google Annotation Chart - PHP, MySQL

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
mifro
Člen
Avatar
mifro:4.2.2021 20:38

Ahoj všem,
snažím se vytvořit online graf, kde bych se mohl posouvat v čase a zoomovat. Zaujal mě google charts, typ annotation chart.
Projekt je takový, že z čidla přes arduino a gprs modul pošlu do MySQL databáze hodnotu do druhého sloupce (Value1) a první sloupec je TimeStamp ve formátu 2021-02-04 18:25:59. Pak použiju kód níže, kde načtu tabulku SAVE_DATA, ale zřejmě mám špatný formát DateTime a píše mi to First column must contain date, or date and time. Vůbec nemohu přijít na to, jak tam ten správný formát dostat. V PHP i MySQL jsem amatér a možná je v kódu více chyb. Nicméně když použiju klasický Line chart, to funguje bez problému.

Zkusil jsem:

<?php
 $con = mysqli_connect('server','user','pass','dbname');
?>



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

        function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['class Name','mm/s'],

<?php
  $query = "SELECT * from SAVE_DATA";
  $exec = mysqli_query($con,$query);
  while($row = mysqli_fetch_array($exec)){
  echo "['".$row['DateTime']."',".$row['Value1']."],";
 }
?>
]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
        var options = {
          displayAnnotations: true
        };

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

  <body>
    <div id='chart_div' style='width: 100%; height: 600px;'></div>
  </body>
</html>
Editováno
 
Odpovědět
4.2.2021 20:38
Avatar
mifro
Člen
Avatar
mifro:6.2.2021 17:57

Ahoj,
trochu jsem pokročil a upravil kód. Mám ale stále problém s typem čísla... Value1 mám jako INT.
Časová osa se mi už vykresluje ok, ale hodnoty ne.

http://vibroguard.cz/test/ano.php

Nad grafem je výpis json tabulky.

Nevěděl bystě někdo, kde může být problém?

<?php
$connect = mysqli_connect("xxx", "xxx", "xxx", "xxx");
$query = '
SELECT
Value1,
UNIX_TIMESTAMP(CONCAT_WS(" ", Value1_Date, Value1_Time)) AS datetime
FROM SAVE_DATA

';
$result = mysqli_query($connect, $query);
$rows = array();
$table = array();

$table['cols'] = array(
 array(
  'label' => 'Date Time',
  'type' => 'datetime'
 ),
 array(
  'label' => 'mm/s',
  'type' => 'number'
 )
);

while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
 $datetime = explode(".", $row["datetime"]);
 $sub_array[] =  array(
      "v" => 'Date(' . $datetime[0] . '000)'
     );
 $sub_array[] =  array(
      "v" => $row["Value1"]
     );
 $rows[] =  array(
     "c" => $sub_array
    );
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>


<html>
 <head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
    var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

    var options = {
     title:'Sensors Data',
     legend:{position:'bottom'},
     chartArea:{width:'95%', height:'65%'},
    };

    var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

    chart.draw(data, {displayAnnotations: true});
   }
  </script>
  <style>
  .page-wrapper
  {
   width:1000px;
   margin:0 auto;
  }
  </style>
 </head>
 <body>
  <div class="page-wrapper">
   <br />
   <h2 align="center">Display Google Line Chart with JSON PHP & Mysql</h2>
   <div id="chart_div" style="width: 100%; height: 500px"></div>
  </div>
 </body>
</html>
 
Nahoru Odpovědět
6.2.2021 17:57
Avatar
Jan Poláček
Tvůrce
Avatar
Odpovídá na mifro
Jan Poláček:6.2.2021 19:37

Vypadá to, že sis poradil :)

Nahoru Odpovědět
6.2.2021 19:37
Instrukce na adrese 0x77104f29 odkazovala na adresu paměti 0x00000014. S pamětí nelze provést operaci: written.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.