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>

Replace 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>

Replace 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>

Replace CHANNEL_ID with the ID of the channel and FIELD_ID with the ID of the field that you want to chart.