Diferència entre revisions de la pàgina «Ús de Grafana llegint dades de MariaDB»

De binefa.com
Salta a la navegació Salta a la cerca
m
 
(Hi ha 6 revisions intermèdies del mateix usuari que no es mostren)
Línia 2: Línia 2:
  
 
= Accés a Grafana =
 
= Accés a Grafana =
Hi ha tres tipus d'usuario a [https://grafana.com/ Grafana]: ''Administrador'', ''Editor'' i ''Visualitzador''.
+
Hi ha tres tipus d'usuari a [https://grafana.com/ Grafana]: ''Administrador'', ''Editor'' i ''Visualitzador''.
  
[[Image:28grafanaAdminUsers012023.png|center|Exemple d'usuarios a Grafana]]
+
[[Image:28grafanaAdminUsers012023.png|center|Exemple d'usuaris a Grafana]]
  
 
El primer cop que entreu a Grafana (port 3000 del localhost: http://localhost:3000) les credencials d'accés són ''admin''/''admin'' i es requereix un canvi de contrasenya. El segon cop ja hi heu d'accedir amb la nova contrasenya.
 
El primer cop que entreu a Grafana (port 3000 del localhost: http://localhost:3000) les credencials d'accés són ''admin''/''admin'' i es requereix un canvi de contrasenya. El segon cop ja hi heu d'accedir amb la nova contrasenya.
Línia 15: Línia 15:
 
[[Image:24grafanaAdminDataSource2023.png|center|Establiment de l'origen de dades]]
 
[[Image:24grafanaAdminDataSource2023.png|center|Establiment de l'origen de dades]]
  
 +
Canvieu '''aula206''' per '''aula508''':
  
 
[[Image:25grafanaAdminDataSource022023.png|center|Establiment de l'origen de dades]]
 
[[Image:25grafanaAdminDataSource022023.png|center|Establiment de l'origen de dades]]
Línia 26: Línia 27:
 
[[Image:22grafanaCreateDashboard2023.png|center|Creació d'un nou tauler de control]]
 
[[Image:22grafanaCreateDashboard2023.png|center|Creació d'un nou tauler de control]]
 
=== Heu de treure el límit de 50 punts per gràfica ===
 
=== Heu de treure el límit de 50 punts per gràfica ===
Treure el límit de 50 punts per gràfica (seleccioneu el commutador '''order''' i esborreu el número 50):
+
Treure el límit de 50 punts per gràfica (seleccioneu el commutador '''Order''' i esborreu el número 50):
  
 
[[Image:23grafanaCreateDashboard2023.png|center|Treure el límit de 50 punts per gràfica]]
 
[[Image:23grafanaCreateDashboard2023.png|center|Treure el límit de 50 punts per gràfica]]
 +
 
=== Origen de dades ('''Dataset''') ===
 
=== Origen de dades ('''Dataset''') ===
 
Origen de dades a visualitzar ('''Dataset''' <-- ''aula508''):
 
Origen de dades a visualitzar ('''Dataset''' <-- ''aula508''):
 
[[Image:24grafanaCreateDashboard2023.png|center|Selecció de l'origen de dades]]
 
[[Image:24grafanaCreateDashboard2023.png|center|Selecció de l'origen de dades]]
 
==== Generació de dades per a visualitzar ====
 
==== Generació de dades per a visualitzar ====
Aprofitatnt l'exercici ''Aleatorizació controlada pel tauler de control'', farem servir les dades generades i emmagatzemades a MariaDB per a visualitzar-los a Grafana.
+
Aprofitant l'exercici ''Aleatorizació controlada pel tauler de control'', farem servir les dades generades i emmagatzemades a MariaDB per a visualitzar-les a Grafana.
  
 
[[Image:25nodoMariaDbNodeRed.png|center|Generació de dadess aleatòries]]
 
[[Image:25nodoMariaDbNodeRed.png|center|Generació de dadess aleatòries]]
 +
 +
Al seleccionar el commutador (''switch'') '''Randomize''' comença la generació de dades aleatòries. Al deseleccionar-lo s'atura la generació de dades.
 +
 +
[[Image:26nodoMariaDbNodeRed.png|center|Generació de dades aleatòries]]
 +
 +
[https://www.binefa.cat/training/upcSchool/2023/20230415/26nodeRedRandomUi.nodered.json Codi del NodeRED que genera dues dades aleatòries]
 +
 +
=== Selecció de taula i dades a visualitzar ===
 +
Seleccioneu una taula vista amb '''time''' amb format d''''època UNIX'''. Després seleccioneu la columna '''time''' i les dades a visualitzar ('''valueT''')
 +
[[Image:25grafanaCreateDashboard2023.png|center|Selecció de taula i dades a visualitzar]]
 +
 +
Afegiu més dades a visualitzar (afegiu '''valueRH''')
 +
[[Image:26grafanaCreateDashboard2023.png|center|Selecció de taula i dades a visualitzar]]
 +
 +
== Paràmetres de la gràfica ==
 +
 +
[[Image:30grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 +
 +
[[Image:31grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 +
 +
[[Image:32grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 +
 +
[[Image:33grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 +
== Paràmetres de l'estat (''stat'') ==
 +
[[Image:34grafanaStat2023.png|center|Paràmetres de l'estat]]
 +
 +
== Paràmetres del rellotge de visualització (''gauge'') ==
 +
 +
[[Image:35grafanaGauge2023.png|center|Paràmetres del rellotge de visualització]]
 +
 +
== Visualització final amb 3 elements ==
 +
Deseu el tauler de control a una carpeta:
 +
[[Image:38grafana3elements2023.png|center|Visualització final amb 3 elements]]

Revisió de 20:17, 21 gen 2024

Exemple de visualització a Grafana

Accés a Grafana

Hi ha tres tipus d'usuari a Grafana: Administrador, Editor i Visualitzador.

Exemple d'usuaris a Grafana

El primer cop que entreu a Grafana (port 3000 del localhost: http://localhost:3000) les credencials d'accés són admin/admin i es requereix un canvi de contrasenya. El segon cop ja hi heu d'accedir amb la nova contrasenya.

Primera pantalla de Grafana com a administrador

Administració

Establiment de l'origen de dades

Establiment de l'origen de dades

Canvieu aula206 per aula508:

Establiment de l'origen de dades

Usuaris

Nous usuaris

Edició

Entreu amb el vostre usuari.

Creació d'un tauler de control

Creació d'un nou tauler de control

Creació d'un nou tauler de control

Heu de treure el límit de 50 punts per gràfica

Treure el límit de 50 punts per gràfica (seleccioneu el commutador Order i esborreu el número 50):

Treure el límit de 50 punts per gràfica

Origen de dades (Dataset)

Origen de dades a visualitzar (Dataset <-- aula508):

Selecció de l'origen de dades

Generació de dades per a visualitzar

Aprofitant l'exercici Aleatorizació controlada pel tauler de control, farem servir les dades generades i emmagatzemades a MariaDB per a visualitzar-les a Grafana.

Generació de dadess aleatòries

Al seleccionar el commutador (switch) Randomize comença la generació de dades aleatòries. Al deseleccionar-lo s'atura la generació de dades.

Generació de dades aleatòries

Codi del NodeRED que genera dues dades aleatòries

Selecció de taula i dades a visualitzar

Seleccioneu una taula vista amb time amb format d'època UNIX. Després seleccioneu la columna time i les dades a visualitzar (valueT)

Selecció de taula i dades a visualitzar

Afegiu més dades a visualitzar (afegiu valueRH)

Selecció de taula i dades a visualitzar

Paràmetres de la gràfica

Paràmetres


Paràmetres


Paràmetres


Paràmetres

Paràmetres de l'estat (stat)

Paràmetres de l'estat

Paràmetres del rellotge de visualització (gauge)

Paràmetres del rellotge de visualització

Visualització final amb 3 elements

Deseu el tauler de control a una carpeta:

Visualització final amb 3 elements