Main Content

Esta página se ha traducido mediante traducción automática. Haga clic aquí para ver la versión original en inglés.

Incruste sus gráficos de ThingSpeak en páginas web

Puede incrustar gráficos ThingSpeak™ y mostrar datos actualizados en su propio sitio web o blog. Puede utilizar pantallas ThingSpeak para:

  • Proporcione actualizaciones en tiempo real de sus valores medidos en su propia página web.

  • Cree un panel para mostrar múltiples campos o canales en la misma página.

  • Cree una aplicación móvil con gráficos ThingSpeak integrados.

Incrustar un gráfico en una página web

  1. Reúna la información de etiqueta < iframe> de la gráfica que le interesa. En la barra de título de su gráfico, haga clic en la burbuja de palabras.

  2. Copia el texto que aparece en la ventana. El texto tiene el formato que se muestra aquí:

    <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. Puede editar HTML en cualquier editor de texto sin formato, como el Bloc de notas. En tu editor, agrega el elemento que copiaste de tu canal a tu archivo 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>

Aquí hay una muestra de una gráfica incrustada en una página web.

Cambiar el tamaño de los gráficos para ThingSpeak Panel de control

Puede cambiar el tamaño del iframe para asegurarse de que los gráficos se ajusten al espacio disponible. El tamaño de la gráfica es especialmente importante para las pantallas móviles. Si proporciona solo el parámetro de restricción, su navegador se asegura de que el objeto encaje en el espacio definido. Por ejemplo, utilice <iframe width=”200”...> para asegurarse de que su iframe encaje dentro de un espacio de 200 píxeles en la pantalla.

También puede combinar varias gráficas de diferentes canales de campos en la misma pantalla. Aquí hay una vista de tablero de cuatro gráficas.

Uno ha sido redimensionado manualmente para adaptarse al espacio. El espacio de tabla controla el tamaño de tres de los gráficos. Este código HTML muestra un panel 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>

Temas relacionados