Main Content

Cette page a été traduite par traduction automatique. Cliquez ici pour voir la dernière version en anglais.

Intégrez vos tracés ThingSpeak sur des pages Web

Vous pouvez intégrer des graphiques ThingSpeak™ et afficher des données à jour sur votre propre site Web ou blog. Vous pouvez utiliser les écrans ThingSpeak pour :

  • Fournissez des mises à jour en temps réel de vos valeurs mesurées sur votre propre page Web.

  • Créez un tableau de bord pour afficher plusieurs champs ou canaux sur la même page.

  • Créez une application mobile avec des tracés ThingSpeak intégrés.

Incorporer un tracé dans une page Web

  1. Rassemblez les informations de balise <iframe> du tracé qui vous intéresse. Dans la barre de titre de votre tracé, cliquez sur la bulle de mots.

  2. Copiez le texte qui apparaît dans la fenêtre. Le texte a le format indiqué ici :

    <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. Vous pouvez modifier le code HTML dans n'importe quel éditeur de texte brut tel que le Bloc-notes. Dans votre éditeur, ajoutez l'élément que vous avez copié depuis votre canal dans votre fichier 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>

Voici un exemple de tracé intégré sur une page Web.

Redimensionner les tracés pour le tableau de bord ThingSpeak

Vous pouvez redimensionner l'iframe pour vous assurer que les tracés correspondent à l'espace disponible. La taille du tracé est particulièrement importante pour les écrans mobiles. Si vous fournissez uniquement le paramètre de contrainte, votre navigateur s'assure que l'objet tient dans l'espace défini. Par exemple, utilisez <iframe width=”200”...> pour vous assurer que votre iframe tient dans un espace de 200 pixels sur l'écran.

Vous pouvez également combiner plusieurs tracés de différents canaux de champs dans le même affichage. Voici une vue du tableau de bord de quatre tracés.

L'un a été redimensionné manuellement pour s'adapter à l'espace. L'espace table contrôle la taille de trois des tracés. Ce code HTML illustre un tableau de bord 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>

Sujets associés