Betten Sie Ihre ThingSpeak-Plots in Webseiten ein
Sie können ThingSpeak™-Grafiken einbetten und aktuelle Daten auf Ihrer eigenen Website oder Ihrem Blog anzeigen. Sie können ThingSpeak-Displays für Folgendes verwenden:
Stellen Sie Echtzeit-Updates Ihrer Messwerte auf Ihrer eigenen Webseite bereit.
Erstellen Sie ein Dashboard, um mehrere Felder oder Kanäle auf derselben Seite anzuzeigen.
Erstellen Sie eine mobile App mit eingebetteten ThingSpeak-Plots.
Einbetten eines Diagramms in eine Webseite
Sammeln Sie die <iframe>-Tag-Informationen aus dem Diagramm, an dem Sie interessiert sind. Klicken Sie in der Titelleiste Ihres Diagramms auf die Wortblase.
Kopieren Sie den Text, der im Fenster angezeigt wird. Der Text hat das hier gezeigte Format:
<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">
Sie können HTML in jedem einfachen Texteditor wie Notepad bearbeiten. Fügen Sie in Ihrem Editor das Element, das Sie aus Ihrem Kanal kopiert haben, zu Ihrer HTML-Datei hinzu.
<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>
Hier ist ein Beispiel für ein eingebettetes Diagramm auf einer Webseite.
Diagramme für ThingSpeak Dashboard skalieren
Sie können die Größe des Iframes ändern, um sicherzustellen, dass die Diagramme in den verfügbaren Platz passen. Die Diagrammgröße ist besonders wichtig für mobile Displays. Wenn Sie nur den einschränkenden Parameter angeben, stellt Ihr Browser sicher, dass das Objekt in den definierten Bereich passt. Verwenden Sie beispielsweise <iframe width=”200”...>, um sicherzustellen, dass Ihr Iframe in einen 200 Pixel großen Bereich auf dem Display passt.
Sie können auch mehrere Diagramme aus verschiedenen Feldkanälen in derselben Anzeige kombinieren. Hier ist eine Dashboard-Ansicht von vier Diagrammen.
Bei einem wurde die Größe manuell angepasst, damit es in den Raum passt. Der Tabellenbereich steuert die Größe von drei der Diagramme. Dieser HTML-Code demonstriert ein ThingSpeak-Dashboard.
<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>
