Google graf z mySQL

pavel1tu · Příspěvek od **pavel1tu** » 04 pro 2017, 19:49

Zdravím,

tady jsem moc nepochodil, ale na itnetwork mi pomohl programátor online nápovědou a opravou kodu + odkaz na HOW-TO tvorbu JSON formátu.
Jednak se chci pochlubit, že já neprogramátor jsem to zvládl, jednak nabízím kdo by se v tom plácal kod + kompletní vysvětlení postupu.

Umím zatím jen line graf, ale to stačí, ne ?

graf

PS: na hodnoty nehleďte, už potlačuji ztrátu komunakace s čidly (nahrazení poslední dobrou hodnotou) + potlačení napětí mimo rozsah, ale toto jsem jel ze zkušební databáze, kdybych si ji pomrvil

pavel1tu · Příspěvek od **pavel1tu** » 28 pro 2017, 20:48

Bylo pár dotazů jak jsem to vyřešil, tak to sem hodím ....

1) Databáze, mySQL kompatabilní ... jméno databáze "database", tabulka "arduino_data"
mySQL
ID(int); timestamp(TIMESTAMP); teplota(float); napeti(float); solar(float)

2) PHP kod - oproti příkladům jsem sloučil dohromady vytváření struktory dat JSON a tvorbu grafu, protože budu vykreslovat těchto grafů asi 20 na jednu WWW stránku.
SQL dotaz pro data jde upravit i na poslední XX zápisy, nebo poslední den či týden ... to už si najdete.

Důležité je jen dodržet alespoň tuto minimální strukturu JSON.
Pokud chcete jiný typ grafu, jděte na google, tam u každého grafu najdete jakou strukturu JSON musí mít.
Pak lze graf změnit.
Graf má ještě spoustu dalších možností co nastavit jinak, viz, dokumentace na google.

Kód: Vybrat vše

<?php

/* Database Name */
$DB_NAME = 'database';

/* Database Host */
$DB_HOST = 'localhost';

/* Your Database User Name and Passowrd */
$DB_USER = 'user';
$DB_PASS = '123456';

  /* Establish the database connection */
  $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
  }

  /* vyber zdroj dat pro graf */
  $result = $mysqli->query('SELECT * FROM arduino_data');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    /* vyber data zobrazovaná v grafu */
    array('label' => 'timestamp', 'type' => 'string'),
    array('label' => 'teplota', 'type' => 'number'),
    array('label' => 'napeti', 'type' => 'number'),
    array('label' => 'solar', 'type' => 'number')
    );

    /* Extract the information from $result */
    foreach($result as $r) {
        $temp = array();
        // The following line will be used to slice the Pie chart
        $temp[] = array('v' => (string) $r['timestamp']);
        // Values of the each slice
        $temp[] = array('v' => (float) $r['teplota']);
        //$rows[] = array('c' => $temp);
        $temp[] = array('v' => (float) $r['napeti']);
        //$rows[] = array('c' => $temp);
        $temp[] = array('v' => (float) $r['solar']);
        $rows[] = array('c' => $temp);
        }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>


<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
          title: 'Teplota - ARDUINO 01',
          //is3D: 'true',
          width: 800,
          height: 600
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);

    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

pavel1tu · Příspěvek od **pavel1tu** » 28 pro 2017, 20:56

nevím proč, ale nelze příspěvky upravovat.
Více se bude ohledně PHP a Arduina objevovat na https://pavel1tu.dupeto.cz/ - funkční jen když tento NAS jede, tak 8-10h denně. Časem to bude na novém NAS.

martinius96 · Příspěvek od **martinius96** » 28 pro 2017, 21:13

Ten graf tam máš pekný, inak cez PHP môžeš čas pretvoriť na krajší aj vlastný formát. Prevedieš si napríklad strtotime na sekundy od 1.1.1970 a potom si môžeš pretvoriť čas, kde budeš mať 1. DEC 08:10, alebo 1. Dec 2017 08.10, alebo i neštandardne neviem ako je po česky december

Tak napr listopad. Môžeš mať 1. Listopad 17 8h:5min, môžeš si to pretvoriť tak ako chceš. Možností je plno, ja som dlho bojoval s tou osou x aj na vlastnom webe, kedy sa mi pri časoch nevykleslovalo nič, hoci Json mi tam dáta dával, musím sa k tomu niekedy bližšie dostať a určite skúsim i tvoj kód

Verím, že to bude fungovať.

Inak timestamp posielaš z Arduina, alebo to máš ako ja, že on update CURRENT_TIMESTAMP pre ten timestamp? Takto mi to prišlo fajn, lebo som nemusel mať pri Arduine RTC modul, čas bol vždy správny podľa servera online. Tiež by som uvítal možnosť upravovať príspevky, tiež by som do starších možno niečo doplnil

Inak ja som používal CanvasJS pre grafy, plánujem sa cez nejaké to voľno dať do návrhu v2 pre meteostanicu

. V posledných 2 mesiacoch som začal robiť s AJAX-om, i keď iba jednoducho. V reálnom čase som vykresľoval teploty, ktoré chodili na server. Dá sa to použiť aj na meteostanicu, kedy sa stránka nemusí refreshovať, keď chceme dostať niečo v časovom intervale. Napríklad keď raz za 5-10 min nahráme na web teplotu, vlhkosť atď, môžeme raz za minútu/5min refreshnúť graf/budík, bez toho, aby sa refreshla celá stránka a ukazuje nám to krásne posledne nameranú hodnotu, prenesie sa tak 3kB na request, možno menej. Je to veľmi jednoduché.

Line grafy mi prídu pre meteostanice ako to najlepšie. Nech to pokračuje

pavel1tu · Příspěvek od **pavel1tu** » 29 pro 2017, 09:38

martinius96 píše: ↑
28 pro 2017, 21:13
Ten graf tam máš pekný, inak cez PHP môžeš čas pretvoriť na krajší aj vlastný formát. Prevedieš si napríklad strtotime na sekundy od 1.1.1970 a potom si môžeš pretvoriť čas, kde budeš mať 1. DEC 08:10, alebo 1. Dec 2017 08.10, alebo i neštandardne neviem ako je po česky december Tak napr listopad. Môžeš mať 1. Listopad 17 8h:5min, môžeš si to pretvoriť tak ako chceš. Možností je plno, ja som dlho bojoval s tou osou x aj na vlastnom webe, kedy sa mi pri časoch nevykleslovalo nič, hoci Json mi tam dáta dával, musím sa k tomu niekedy bližšie dostať a určite skúsim i tvoj kód Verím, že to bude fungovať.

Inak timestamp posielaš z Arduina, alebo to máš ako ja, že on update CURRENT_TIMESTAMP pre ten timestamp? Takto mi to prišlo fajn, lebo som nemusel mať pri Arduine RTC modul, čas bol vždy správny podľa servera online. Tiež by som uvítal možnosť upravovať príspevky, tiež by som do starších možno niečo doplnil Inak ja som používal CanvasJS pre grafy, plánujem sa cez nejaké to voľno dať do návrhu v2 pre meteostanicu . V posledných 2 mesiacoch som začal robiť s AJAX-om, i keď iba jednoducho. V reálnom čase som vykresľoval teploty, ktoré chodili na server. Dá sa to použiť aj na meteostanicu, kedy sa stránka nemusí refreshovať, keď chceme dostať niečo v časovom intervale. Napríklad keď raz za 5-10 min nahráme na web teplotu, vlhkosť atď, môžeme raz za minútu/5min refreshnúť graf/budík, bez toho, aby sa refreshla celá stránka a ukazuje nám to krásne posledne nameranú hodnotu, prenesie sa tak 3kB na request, možno menej. Je to veľmi jednoduché.

Line grafy mi prídu pre meteostanice ako to najlepšie. Nech to pokračuje

Ahoj,
toto je můj první funkční počin, nyní jsem asi o 100 verzí dále. Nechtěl jsem ale zatěžovat ostatní kodem na více hodnot, toto vychází z příkladu na českém serveru Arduino.
- s osou X právě u Google žádný problém není, mohu si formáty upravovat jak chci, ale já šel ještě dál.
- časovou značku zde opravdu přiřazuji v databázi automaticky. Ale v ostrém projektu je 10 externích měřících bodů, čas a datum přiřazuje centrálka. V databázi dále ukládám zvlášť datum "1.1.1070" a čas "12:00" a to bez sekund/vteřin. je to výhodnější, protože grafy zobrazuji pak po dnech a šipkou si můžeš listovat sem a tam .... (echm, tohle mi někdy chodí a někdy ne, ale pracuje se na tom). PHP generuje i alarmy a posílá email a SMS, kde je problém. Do budoucna bude i měření kvality vzduchu, větrání, topení - vzdáááálená budoucnost.

Oproti původnímu plánu jede všech 20 skleníků, ale já měřím jen v 10, tudíž rychle doděláváme měření do dalších. Zatím jedeme bez solárního dobíjení, jen na 3AAA, dodělal jsem na krabičku LED, která signalizuje slabou baterku. Měříme jednou za 10min, zatím baterky drží.....

martinius96 · Příspěvek od **martinius96** » 06 led 2018, 04:01

Pavle? Máš v tom kóde, ktorý si tu dával celý graf? Tak ako je tu?
http://pavel1tu.8u.cz/index.php?stranka=json1
Chcel by som vyskúšať upraviť moju meteostanicu

Momentálne mi na x osi nevypisuje nič.

pavel1tu · Příspěvek od **pavel1tu** » 06 led 2018, 09:06

martinius96 píše: ↑
06 led 2018, 04:01
Pavle? Máš v tom kóde, ktorý si tu dával celý graf? Tak ako je tu?
http://pavel1tu.8u.cz/index.php?stranka=json1
Chcel by som vyskúšať upraviť moju meteostanicu Momentálne mi na x osi nevypisuje nič.

Ano, používám JEN GoogleChart
Umím to jen stěmito omezeními (není čas to dále bádat):
- 1 PHP soubor buď i graf, nebo více grafů - ale vždy jen 1 SQL dotaz "SELECT"
- ovlivnit měřítko osy Y
- barvy, formát, tloušťky čar
- velikost grafu X,Y
- počet zobrazovaných proměnných
- pouze tento LINE graf, buď s ostrými přechody, nebo s kulatými (te´d nevím jak se to jmenuje)

Neumím zatím:
- změnit formát datumu u osy X (sere mne to)

S mySQL umím:
- dotaz na posledních X záznamů, správně srovnaných dle data
- dotaz na poslední, nebo jakýkoliv den, měsíc, rok - správně srovnaný dle data
- zprůměrovat záznamy za den/měsíc/rok za období měsíc/týden/rok - správně srovnaný dle data

takže nic moc

martinius96 · Příspěvek od **martinius96** » 22 úno 2018, 22:13

Grafy som vyskúšal, fungujú na jednotku, len som si upravil štandard dopytu podľa spôsobu aký používam

Avšak nejde mi to dobre responzívne nastaviť na mobil, momentálne to ako-tak korigujem cez bootstrap...
Okrem toho ešte nechápem časť, čo znamená to v a c v poli? Dík.

Kód: Vybrat vše

   $temp8[] = array('v' => (string) $cas8);1
        $temp8[] = array('v' => (float) $r8['tlak']);
        $rows8[] = array('c' => $temp8);

H107 · Příspěvek od **H107** » 10 dub 2018, 15:40

Zdravím,
na stránke mám google grafy, ktoré ťahajú dáta z MySQL, kde ich posiela arduino. Potreboval by som poradiť svizuálnou stránkou, konkrétne s úpravou popiskov na osi x (čiarový graf zobrazuje údaje o teplote, vlhkosti a tlaku za posledných 6 hodín). Tie sú vo formáte RRRR.MM.DD HH:MM:SS a na výslednom zobrazení vidno len napr. "2018.0..." Ako by sa to dalo upraviť/zmenšiť/skrátiť tak, aby sa zobrazoval rozumný údaj napr. "10.04. 15:30".

Ďalej tam mám ukazovatele "Gauge" (neviem preklad), kde sú zobrazené najnovšie namerané údaje a tam sa mi podarilo dostať do popisku len celý názov stĺpca z databázy, napr. "teplota_vonku", "vlhkost_vonku" ... síce je to čitateľné, ale radšej by som tam mal napr. "Vonku °C", "Vlhkosť %"... To isté by som chcel dostať aj do legendy čiarového grafu. Nerád by som kvôli tomu menil názvy stĺpcov v databáze a tým pádom aj všetky súvisiace kódy.

Poradí niekto?

Vďaka

pavel1tu · Příspěvek od **pavel1tu** » 10 dub 2018, 17:29

Popis osy X
neřešil jsem zrovna tento případ, ale dle dokumentace Google lze jednoduše formátovat tento výstup.
Já zobrazoval grafy buď za ten daný den, pak jsem z časové značky SQL dotazem vykousl jen čas,
nebo průměry za měsíc, kdy jsem SQL dotazem vytvořil denní průměry za den a k nim vykousl z časové značky jen datum.

Popisky
No, pokud jsem chtěl jiné popisky než je sloupec z databáze, což bylo vždy, tak jsem si je vložil do toho JSON výstupu, pak jej použije Google sám.

Oboje je popsané v dokumentaci na stránkách Google.

PS: Google postupně opouštím, není již dlouhodobě vyvíjen, na ostrých verzích jsem přešel na placenou platformu, bohužel zatím nelze nasdílet, nové NAS nemám propojené ven do netu.

forum.hwkitchen.cz

Google graf z mySQL

Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Re: Google graf z mySQL

Kdo je online