Incorpora i tuoi grafici ThingSpeak nelle pagine web
Puoi incorporare grafica ThingSpeak™ e visualizzare dati aggiornati sul tuo sito web o blog. È possibile utilizzare i display ThingSpeak per:
Fornisci aggiornamenti in tempo reale dei valori misurati sulla tua pagina web.
Crea una dashboard per mostrare più campi o canali sulla stessa pagina.
Crea un'app mobile con grafici ThingSpeak incorporati.
Incorpora un grafico in una pagina web
Raccogli le informazioni sul tag <iframe> dal grafico che ti interessa. Sulla barra del titolo del grafico, fai clic sulla parola bolla.
Copia il testo che appare nella finestra. Il testo ha il formato mostrato qui:
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">
Puoi modificare l'HTML in qualsiasi editor di testo semplice come Blocco note. Nel tuo editor, aggiungi l'elemento che hai copiato dal tuo canale al tuo file HTML.
<html><head><title>ThingSpeak Embedded Plot</title></head> <body> <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15"> </body></html>
Ecco un esempio di grafico incorporato in una pagina web.
Ridimensionare i grafici per la dashboard ThingSpeak
Puoi ridimensionare l'iframe per assicurarti che i grafici si adattino allo spazio disponibile. La dimensione del grafico è particolarmente importante per i display mobili. Se fornisci solo il parametro vincolante, il tuo browser si assicura che l'oggetto si adatti allo spazio definito. Ad esempio, utilizza <iframe width=”200”...> per assicurarti che il tuo iframe rientri in uno spazio di 200 pixel sul display.
È inoltre possibile combinare più appezzamenti di diversi canali di campi nella stessa visualizzazione. Ecco una vista dashboard di quattro grafici.
Uno è stato ridimensionato manualmente per adattarsi allo spazio. Il tablespace controlla la dimensione di tre grafici. Questo codice HTML mostra un dashboard ThingSpeak .
<html> <head> <title>Data Collection Dashboard</title> </head> <body> <table border=2 bordercolor="#0000FF"> <tr><td colspan="2"> <h1 align="center" color="#00FFFF">Data Collection Dashboard</h1> </td></tr> <tr><td> <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/320695/charts/1?bgcolor=%23ffffff&color=%23F62020&dynamic=true&results=800&type=line&update=15"></iframe> </td> <td><iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/166526?color=%23FFFFFF&dynamic=true"></iframe> </td></tr> <tr><td> <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/12397/charts/2?results=720&dynamic=true&update=15"></iframe> </td> <td> <iframe width="300" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/308777"></iframe> <h3>Links</h3> <a href="https://www.google.com">Google</a><br> <a href="https://www.Mathworks.com">Mathworks</a><br> <a href="https://en.wikipedia.org/wiki/Cleve_Moler">Wikipedia</a> </td> </html>