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

Intégrer un graphique

Intégrer un graphique d'un canal public

Utilisez l'API graphique comme source d'un iframe pour intégrer des graphiques de canaux ThingSpeak™ publics 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 graphique en ajustant les paramètres height et width dans iframe. Par exemple, pour avoir un graphique de taille 800 x 400 pixels, le iframe devrait ê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 graphique d'un canal privé sur votre page Web, utilisez l'API graphique comme source d'un iframe et ajoutez le paramètre graphique api_key=XXXXXXXXXXXXX, en remplaçant XXXXXXXXXXXXX par la clé API de lecture du canal. Si vous souhaitez rendre le graphique dynamique, vous pouvez également ajouter le paramètre de graphique 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 représenter graphiquement et XXXXXXXXXXXXX par la clé API de lecture du canal privé.

Intégrer un graphique dynamique

Pour placer un graphique ThingSpeak dynamique sur votre page Web, utilisez l'API graphique comme source d'un iframe et ajoutez le paramètre de graphique 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.

Voir aussi

Rubriques