Main Content

Questa pagina è stata tradotta con la traduzione automatica. Fai clic qui per vedere l’originale in inglese.

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

  1. Raccogli le informazioni sul tag <iframe> dal grafico che ti interessa. Sulla barra del titolo del grafico, fai clic sulla parola bolla.

  2. 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">

  3. 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>

Argomenti complementari