Intégrer un graphique
Intégrer un graphique d'un canal public
Utilisez l'API de diagramme comme source d'un iframe
pour intégrer des graphiques de canal publics ThingSpeak™ sur votre page Web.
Code intégré du diagramme public
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
CHANNEL_ID
par l'ID du canal et FIELD_ID
par l'ID du champ que vous souhaitez tracer. Vous pouvez également ajuster la hauteur et la largeur du diagramme en ajustant les paramètres height
et width
dans iframe
. Par exemple, pour avoir un diagramme de taille 800 x 400 pixels, le iframe
doit être <iframe width="800" height="400" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
.Exemple de graphique
Intégrer un graphique d'un canal privé
Pour intégrer un diagramme d'un canal privé sur votre page Web, utilisez l'API chart comme source d'un iframe
, et ajoutez le paramètre de diagramme api_key=XXXXXXXXXXXXX
, en remplaçant . $ avec la clé d'API en lecture du canal. Si vous souhaitez rendre le diagramme dynamique, vous pouvez également ajouter le paramètre diagramme dynamic=true
.
Code embarqué du diagramme privé
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID?api_key=XXXXXXXXXXXXX"></iframe>
CHANNEL_ID
par l'ID du canal, FIELD_ID
par l'ID du champ que vous souhaitez tracer et XXXXXXXXXXXXX
par le lire la clé d'API du canal privé.Intégrer un graphique dynamique
Pour placer un diagramme dynamique ThingSpeak sur votre page Web, utilisez l'API chart comme source d'un iframe
et ajoutez le paramètre de diagramme dynamic=true
. $.
Code intégré d'un graphique dynamique
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID?dynamic=true"></iframe>
CHANNEL_ID
par l'ID du canal et FIELD_ID
par l'ID du champ que vous souhaitez tracer.