Incruste sus diagramas de ThingSpeak en páginas web

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

puedes incrustar ThingSpeak™ gráficos y mostrar datos actualizados en su propio sitio web o blog. Puedes usar ThingSpeak muestra a:

Proporcione actualizaciones en tiempo real de sus valores medidos en su propia página web.
Cree un tablero para mostrar múltiples campos o canales en la misma página.
Hacer una aplicación móvil con gráficas incrustadas de ThingSpeak

Incrustar un gráfico en una página web

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.

Copie 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">

Puede editar HTML en cualquier editor de texto sin formato, como el Bloc de notas. En su editor, agregue el elemento que copió de su canal a su 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.

Redimensionar gráficas para el tablero de ThingSpeak

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, use< ancho del iframe=”200”...> para asegurarse de que su iframe se ajuste a 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 tablas controla el tamaño de tres de los gráficos. Este código HTML demuestra una ThingSpeak tablero.

<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

Incrustar un gráfico