Main Content

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

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>
Remplacez 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>
Remplacez 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>
Remplacez CHANNEL_ID par l'ID du canal et FIELD_ID par l'ID du champ que vous souhaitez tracer.

Sujets associés