Embed a Chart
Embed a Chart of a Public Channel
Use the chart API as the source of an iframe
to embed public
ThingSpeak™ channel charts on your web page.
Public Chart Embedded Code
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
CHANNEL_ID
with the ID of the channel and FIELD_ID
with the ID of the field that you want to chart. You can also adjust the height and width
of chart by adjusting the height
and width
parameters in the iframe
. For example, to have a chart of size 800 x
400 pixels, the iframe
should be <iframe width="800"
height="400" style="border: 1px solid #cccccc;"
src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
.Example of Chart
Embed a Chart of a Private Channel
To embed a chart of a private channel on your web page, use the chart API as the source
of an iframe
, and add the chart parameter
api_key=XXXXXXXXXXXXX
, replacing XXXXXXXXXXXXX
with
the read API key of the channel. If you want to make the chart dynamic, you can also add the
chart parameter dynamic=true
.
Private Chart Embedded Code
<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
with the ID of the channel, FIELD_ID
with the ID of the field that you want to chart, and XXXXXXXXXXXXX
with
the read API key of the private channel.Embed a Dynamic Chart
To place a dynamic ThingSpeak chart on your web page, use the chart API as the source of an
iframe
and add the chart parameter
dynamic=true
.
Dynamic Chart Embedded Code
<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
with the ID of the channel and FIELD_ID
with the ID of the field that you want to chart.