Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Využij akce až 80 % zdarma při nákupu e-learningu - více informací. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Swift
Avatar
mifro
Člen
Avatar
mifro:4. února 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. února 20:40
 
Odpovědět
4. února 20:38
Avatar
mifro
Člen
Avatar
mifro:6. února 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. února 17:57
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Poláček
Redaktor
Avatar
Odpovídá na mifro
Jan Poláček:6. února 19:37

Vypadá to, že sis poradil :)

Nahoru Odpovědět
6. února 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.