NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
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 4.2.2021 20:40
 
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.