Internet de les coses amb ESP32 i ESP8266

Exemples Referència Plaques   Recursos CITCEA
Projectes Programació Perifèrics   Inici

Generem un gràfic amb els valors guardats

Aquest exemple es basa en un exemple anterior i ara només anem a veure com generar un gràfic amb els valors guardats. Aquest gràfic el podem fer servir després en una pàgina web o en una aplicació feta amb App Inventor.

Imaginem que tenim una taula amb les següents dades recollides:

Taula

És important tenir en compte que (amb el compte de Google configurat en català o castellà) no podem fer gràfics si els valors tenen els decimals separats amb punt. Podem fer servir la funció replace per fer el canvi. Per exemple:

float hum, temp;
String data = "";
    data += temp;
    data.replace('.', ',');

Marquem les caselles que contenen les dades i els títols desitjats. Al menú, anem a la pestanya Insereix i triem l'opció Gràfic.

Taula

Ens crearà un gràfic amb les opcions per defecte i les dades que havíem seleccionat.

Gràfic

Amb el menú que ens sortirà al costat podrem escollir el tipus de gràfic, triar els colors i establir altres paràmetres de disseny del gràfic.

Menú

Un cop tenim el gràfic en el format desitjat, piquem en els tres punts que hi ha a la cantonada superior dreta del gràfic. En el menú que es desplega, triem l'opció Publica el gràfic.

Gràfic

Gràfic

Amb l'opció Enllaç obtindrem una adreça web que permet veure el gràfic al navegador i que podem fer servir com a enllaç en una pàgina web. Amb l'opció Insereix obtindrem unes instruccions html que podem posar dins el codi d'una pàgina per tal que el gràfic hi quedi inserit. En tots dos casos podem triar que el gràfic es mostri com una imatge simple o que sigui interactiu, és a dir que mostri els valors en passar el ratolí per sobre.

En picar el botó Publica obtindrem l'enllaç o el codi corresponent.

Gràfic

Important: Cada cop que es carrega el gràfic, s'actualitza amb els valors actuals de la taula però sempre es farà sobre les caselles marcades quan s'ha creat el gràfic. Això vol dir que si es vol que el gràfic representi els darrers valors, cal que aquests s'escriguin a les caselles corresponents i no afegint una nova filera.

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.